Wie können Sie Tailwind CSS mit dynamischen Klassennamen in React verwenden?

Tailwind CSS mit dynamischen Klassennamen verwenden

Bei der Arbeit mit React und Tailwind CSS kann es verlockend sein, dynamische Werte, wie z. B. Kontextvariablen, als Klassennamen zu übergeben . Allerdings stellt Tailwind eine besondere Anforderung, dass Klassennamen vollständige, ununterbrochene Zeichenfolgen sein müssen. Daher funktioniert die einfache Übergabe einer in einen Klassennamen interpolierten Variablen nicht wie erwartet.

In der Dokumentation von Tailwind heißt es ausdrücklich: „Wenn Sie String-Interpolation verwenden oder Teilklassennamen miteinander verketten, wird Tailwind diese nicht finden und wird dies daher tun.“ nicht das entsprechende CSS generieren.“

Lösung: Vollständige Klassennamen verwenden

Um Tailwind effektiv mit dynamischen Werten zu nutzen, ist es wichtig, Folgendes zu definieren Ihre Klassennamen mit dem vollständigen Wertesatz. Anstatt beispielsweise Folgendes zu verwenden:

<p className={`bg-[${colors.secondary}] text-text-white`}></p>

Definieren Sie die Klasse direkt in Ihrem ThemeContext:

const colors = {
  // …
  secondary: darkTheme ? "bg-[#FFFFFF]" : "bg-[#FFFFFF]",
  // …
};

Verwenden Sie sie dann in Ihrer Komponente wie folgt:

<p className={`${colors.secondary} text-text-white`}></p>

Alternative: Inline-Styling verwenden

Wenn die Definition vollständiger Klassennamen nicht möglich ist, können Sie auch das Style-Attribut verwenden, um Dynamik anzuwenden Stile:

<p className="text-text-white">

Dieser Ansatz ermöglicht mehr Flexibilität beim Arbeiten mit dynamischen Werten, erfordert jedoch die Verwendung von Inline-Stilen.

Das obige ist der detaillierte Inhalt vonWie können Sie Tailwind CSS mit dynamischen Klassennamen in React verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!