How to use clsx in React
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 } = classesconst 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