Comment puis-je appliquer dynamiquement les classes CSS Tailwind dans React à l'aide de littéraux de modèles ?

Application de classes CSS dynamiques avec des littéraux de modèle dans Tailwind CSS

Vous pouvez rencontrer des difficultés lorsque vous essayez de modifier dynamiquement les classes CSS dans Tailwind CSS. Par exemple, si vous essayez d'utiliser le code suivant :

const [click, setClick] = useState(false);

const closeNav = () => {
  setClick(!click);
};

const openNav = () => {
  setClick(!click);
};

<div
  className=" absolute inset-0 ${click ? translate-x-0 : -translate-x-full } 
        transform  z-400 h-screen w-1/4 bg-blue-300 "
>
  <XIcon onClick={closeNav} className=" absolute h-8 w-8 right-0 " />
</div>;

Ce code ne s'exécutera pas efficacement. Pour résoudre ce problème, apportez les modifications suivantes :

<div className={`absolute inset-0 ${click ? 'translate-x-0' : '-translate-x-full'} transform z-400 h-screen w-1/4 bg-blue-300`}></div>

// Alternatively (without template literals):
<div className={'absolute inset-0 ' + (click ? 'translate-x-0' : '-translate-x-full') + ' transform z-400 h-screen w-1/4 bg-blue-300'}></div>

Evitez surtout d'utiliser la concaténation de chaînes lors de la création de noms de classe, comme démontré dans ce qui suit :

<div className={`text-${error ? 'red' : 'green'}-600`}></div>

Optez plutôt pour la sélection noms de classe complets :

<div className={`${error ? 'text-red-600' : 'text-green-600'}`}></div>

// Following is also valid if you don't need to concatenate the class names
<div className={error ? 'text-red-600' : 'text-green-600'}></div>

Tailwind s'abstiendra d'éliminer les noms de classe complets des versions de production s'ils sont inclus dans votre modèle.

De plus, vous avez accès à diverses options, notamment des bibliothèques telles que les noms de classe ou clsx, et des solutions spécifiques à Tailwind telles que twin.macro, twind et xwind.

Lectures complémentaires

• [React.js appliquant la classe de manière conditionnelle noms](https://github.com/facebook/react/issues/2316)
• [Comment ajouter dynamiquement une classe aux noms de classe manuels ?](https://stackoverflow.com/questions/37585255 /comment-ajouter-dynamiquement-une-classe-aux-noms-de-classes-manuels)
• [Méthode correcte de gérer le style conditionnel dans React](https://dev.to/furkancakmak/conditional-css-class-names-in-react-the-right-way-iwk)
• [Intégration d'expressions dans JSX](https:// reactjs.org/docs/jsx-in-owned.html#embedding-expressions-in-jsx)
• [Modèle littéraux - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
• [Optimisation pour la production - Écriture de code HTML purgeable - Tailwind CSS](https : //tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html)

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!