How to use clsx in React

Question

I am trying to understand some uses of clsx in assigning classnames to a component in React.

The construct

className={clsx(classes.menuButton, open &         


        

Answer 1

Many people already explained it pretty well. I still wanted to add an example containing className. In the example you can see different classes, applied if a given condition evaluates to true. In the example you can apply a class with a boolean value, a boolean variable or a compared string (If match, return true). The class classes.drawer is always applied and does not depend on a 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
        })}