Clsx - What is and how to use it

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 && 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?

Chainplate

Answer 1

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.

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

Bamby

Thanks. If I understand you correctly then 'open && classes.menuOpen' has exactly the same effect as '[classes.menuOpen] : open'. – Chainplate

Yeap. They are just two different ways to achieve the same result – Bamby

Thanks again. Last comment - The construct 'className={clsx(classes.appBar, {[classes.appBarShift]: open })}' would have the same effect as 'className={clsx(classes.appBar, {classes.appBarShift: open})}'. The array is really only needed when there is more than one rule dependent on the value of open. – Chainplate

Yes. You can check all the possible sintaxes for clsx here – Bamby

No... the array syntax is for dynamic keys: https://mcmap.net/q/47162/-creating-object-with-dynamic-keys-duplicate {classes.appBarShift: open} would cause an error; {[classes.appBarShift]: open} would create an object with the value of classes.appBarShift as a key. – Fluker

He is refering to pass an array of classes to clsx. Dynamic keys don't have anything to do with that. Yes his example code will fail for the lack of [] delimiting the key. But that wasn't his question – Bamby

Answer 2

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

Sexed

Can you please add some explaination to your code? Code-only answers may fall under 'Very Low Quality' ...and are candidates for deletion....We've always touted that we aren't a code factory. We are the people who teach others to fish. Code-only answers only feed a person for a day – Bookmark

Answer 3

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

Jorry