Comment utiliser clsx dans React

Question

J'essaie de comprendre certaines utilisations de clsx dans l'attribution de noms de classe à un composant dans React.

La construction

 className={clsx(classes.menuButton, open && classes.hide)} 

est assez clair. Il applique 'classes.menuButton', et applique également 'classes.hide' si la valeur du booléen 'open' est true.

Ma question concerne ce deuxième exemple :

 className={clsx(classes.appBar, {[classes.appBarShift]: open })}

Cela appliquera 'classes.appBar'. Mais quelle est la signification du deuxième paramètre ?

Answer 1

Beaucoup de gens l'ont déjà assez bien expliqué. Je voulais toujours ajouter un exemple contenant className. Dans l'exemple, vous pouvez voir différentes classes, appliquées si une condition donnée est vraie. Dans l'exemple, vous pouvez appliquer une classe avec une valeur booléenne, une variable booléenne ou une chaîne comparée (If match, return true). La classe classes.drawer est toujours appliquée et ne dépend pas d'une condition.

 className={clsx(classes.drawer, {                  // classes.drawer is applied always
          [classes.drawerOpen]: true,              // classes.drawerOpen is applied always, bool = true
          [classes.drawerClose]: !open,            // you can also use boolean variable
          [classes.drawerRed]: colorVar === 'red', // you can also use string variable
        })}

Answer 2

classes.appBarShift ne sera appliqué que si open évalué à true . Si le tableau a plus de classes, elles seront toutes appliquées si open évalue à true