我正在尝试了解 clsx 在为 React 中的组件分配类名时的一些用途。
结构
className={clsx(classes.menuButton, open && classes.hide)}
够清楚了。它应用 'classes.menuButton'，如果布尔值 'open' 的值为 true，也应用 'classes.hide'。
我的问题与第二个例子有关：
className={clsx(classes.appBar, {[classes.appBarShift]: open })}
这将应用“classes.appBar”。但是第二个参数是什么意思呢？
【问题讨论】：
标签： reactjs jss class-names
clsx 一般用于有条件地应用给定的className
此语法意味着某些类仅在给定条件评估为 true 时才会应用
const menuStyle = clsx({
[classes.root] : true, //always applies
[classes.menuOpen] : open //only when open === true
})
在此示例中，[classes.menuOpen]（其评估结果类似于randomclassName123）仅在open === true 时才会应用
clsx 基本上输出一个string interpolation。所以你不必一定要使用它，尽管这是一种常见的做法。
有很多支持的语法可以查看官方docs
代替
<div className={`${classes.foo} ${classes.bar} ${classes.baz}`} />
你可以这样使用它
const { foo, bar, baz } = classes
const style = clsx(foo, bar, baz)
return <div className={style} />
【讨论】：
clsx here 的所有可能的sintaxes
{classes.appBarShift: open} 会导致错误； {[classes.appBarShift]: open} 将创建一个对象，其值为 classes.appBarShift 作为键。
许多人已经很好地解释了它。我仍然想添加一个包含 className 的示例。在示例中，您可以看到不同的类，如果给定条件评估为真，则应用这些类。在示例中，您可以应用具有布尔值、布尔变量或比较字符串的类（如果匹配，则返回 true）。
classes.drawer 类总是被应用并且不依赖于条件。
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 仅在 open 计算结果为 true 时应用。如果数组有更多类，如果open 评估为true，则将应用所有这些类
【讨论】：