Comment utiliser clsx dans React

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

clsx est généralement utilisé pour appliquer conditionnellement un nom de className donné

Cette syntaxe signifie qu'une classe ne sera appliquée que si une condition donnée est évaluée à true

const { foo, bar, baz } = classes
const style = clsx(foo, bar, baz)

return <div className={style} />

Dans cet exemple, [classes.menuOpen] (qui évaluera à quelque chose comme randomclassName123 ) ne sera appliqué que si open === true

clsx effectue essentiellement une interpolation de string . Vous n'êtes donc pas obligé de l'utiliser pour appliquer des classes de manière conditionnelle.

Il existe de nombreuses syntaxes prises en charge que vous pouvez vérifier dans la documentation officielle

Au lieu de

<div className={`${classes.foo} ${classes.bar} ${classes.baz}`} />

Vous pouvez l'utiliser comme ça

const menuStyle = clsx({
    [classes.root] : true, //always applies
    [classes.menuOpen] : open //only when open === true
})

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 évaluée à true. Dans l'exemple, vous pouvez appliquer une classe avec une valeur booléenne, une variable booléenne ou une chaîne comparée (si match, retourne 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
        })}