如何在 React 中使用 clsx

Question

我想了解 clsx 在为 React 中的组件分配类名时的一些用途。

结构

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

够清楚了。它应用 'classes.menuButton'，如果布尔值 'open' 为真，它也应用 'classes.hide'。

我的问题与第二个示例有关：

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

这将适用 'classes.appBar'。但是第二个参数是什么意思呢？

Answer 1

classes.appBarShift 仅当 open 的计算结果为 true 时才会应用。如果数组有更多类如果 open 的计算结果为 true

，则所有这些都将被应用

Answer 2

clsx 通常用于有条件地应用给定的 className

此语法意味着某些 class 仅在给定条件的计算结果为 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} />

Answer 3

很多人已经解释的很好了。我仍然想添加一个包含 className 的示例。在示例中，您可以看到不同的 classes，如果给定条件的计算结果为真则应用。在示例中，您可以应用具有布尔值、布尔变量或比较字符串的 class（如果匹配，return 为真）。 class 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
        })}

如何在 React 中使用 clsx

How to use clsx in React

class-names

reactjs

jss