Search code examples
reactjsjssclass-names

Clsx - What is and how to use it

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?

Solution

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