検索

ホームページ  >  に質問  >  本文

連結された文字列クラス名が Tailwind で機能しないのはなぜですか?

以下の例では React 要素にスタイルを適用していないため、毎回、className の外側で style 属性を使用することになります。なぜこれが起こっているのか、そしてどうすればそれを修正できるのか説明していただけますか?

ドキュメント (https://tailwindcss.com/docs/content-configuration#dynamic-class-names) を読みましたが、私の使用例は次のとおりです。ユーザーがカラーピッカーから色を選択し、背景を変更します。選択した色に基づいて。 「bg-[colorValue]」の値を個々の色に渡すことはできないため、後で値を「bg-[」と連結する必要があります。すべての色を完全なクラス名にマッピングすることはできないためです。

リーリー


P粉575055974P粉575055974580日前770

全員に返信(1)返信します

  • P粉309989673

    P粉3099896732023-07-19 10:57:55

    テンプレートのリテラル文字列が適切に機能する場合は、文字列の連結について心配する必要はありません。

    リーリー

    追い風の遊び場

    上記のリンクでは、連結に関する警告も表示されました:「バグ ファインダー: リテラル.eslint の予期しない文字列連結」

    最後の h1 の色を動的に制御するオプションも追加しました。ステータスを通じて達成されました。 :

    リーリー

    返事
    0
  • キャンセル返事