Comment pouvez-vous utiliser Tailwind CSS avec des noms de classe dynamiques dans React ?

Utiliser Tailwind CSS avec des noms de classe dynamiques

Lorsque vous travaillez avec React et Tailwind CSS, il peut être tentant de transmettre des valeurs dynamiques, telles que des variables de contexte, en tant que noms de classe . Cependant, Tailwind a une exigence spécifique selon laquelle les noms de classe doivent être des chaînes complètes et ininterrompues. Par conséquent, le simple fait de transmettre une variable interpolée dans un nom de classe ne fonctionnera pas comme prévu.

La documentation de Tailwind indique explicitement : "Si vous utilisez l'interpolation de chaîne ou si vous concaténez des noms de classe partiels ensemble, Tailwind ne les trouvera pas et donc ne génère pas le CSS correspondant."

Solution : Utiliser des noms de classes complets

Pour utiliser Tailwind efficacement avec des valeurs dynamiques, il est crucial de définir vos noms de classe avec l’ensemble complet des valeurs. Par exemple, au lieu d'utiliser :

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

Définissez la classe directement dans votre ThemeContext :

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

Utilisez-la ensuite dans votre composant comme ceci :

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

Alternative : utilisez le style en ligne

Si définir des noms de classe complets n'est pas possible, vous pouvez également utiliser l'attribut style pour appliquer une dynamique styles :

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

Cette approche permet plus de flexibilité lorsque vous travaillez avec des valeurs dynamiques mais nécessite l'utilisation d'un style en ligne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!