How to use clsx in React

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

The construct

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

is clear enough. It applies 'classes.menuButton', and also applies 'classes.hide' if the value of the boolean 'open' is true.

My question relates to this second example:

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

This will apply 'classes.appBar'. But what is the meaning of the second parameter?

clsx is generally used to conditionally apply a given className

This syntax means that some class will only be applied if a given condition evaluates to true

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

In this example [classes.menuOpen] (which will evaluate to something like randomclassName123) will only be applied if open === true

clsx basically outputs a string interpolation. So you don't have to necessarily use it, although is a common practice.

There are many supported syntax that you can check in the official docs

Instead of

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

You can use it like this

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

return <div className={style} />

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
        })}

classes.appBarShift will be applied only if open evaluates to true. If the array has more classes all of them will be applied if open evaluates to true

How to use clsx in React

Related

Recent Posts