如何在 React 中组合多个类名？

Question

我正在使用 Create-React-App 编写一个小型 React 应用程序。对于简单的样式调整，我使用 tachyons-css。由于频繁出现 CSS 样式问题，我最近从 classic CSS 样式切换到 CSS 模块（也是 SCSS 的有效问题）。现在我想知道是否有一种方法仍然可以同时使用 - CSS 模块和快子样式 - 即使不可能再向 [= 添加一个额外的 "classic" className 43=] 模块样式对象。

在使用 CSS 模块之前，我曾经通过多个 class 名称来定义 class 和快子样式（本例中为 padding5）。例如：

<ExampleComponent className="examplecomponentstyle pa5"/>

当使用 CSS 模块时，CSS class 定义现在看起来像这样：

<ExampleComponent className={styles.examplecomponentstyle}/>

现在如何将此语法与以前使用的快子样式结合起来？有这样的东西可以工作吗？:

<ExampleComponent className={styles.examplecomponentstyle & "pa5"}/>

非常感谢！

2019 年 9 月 5 日更新：

clsx package 正是我想要实现的目标。安装 clsx 后

npm install --save clsx

然后 ExampleComponent 可以例如像这样使用 clsx 设置样式：

<ExampleComponent className={clsx(styles.examplecomponentstyle, "pa5 bg-yellow")}/>

20 年 5 月 17 日更新：

正如 Sandip 在 github 上指出的那样，ClassNames package can as well as the clsx package be used to achieve the same behaviour. The number of weekly downloads of both packages even indicates that ClassNames is much more frequently used than CLSX (~5.2 mio vs ~1.6 mio weekly downloads as of May 17 2020). This link 讨论了两个包之间的性能差异。

Answer 1

没有任何包裹：

className={[styles.examplecomponentstyle, "pa5"].join(" ")};

正如您已经提到的，clsx 包非常好：

className={clsx(styles.examplecomponentstyle, "pa5 bg-yellow")}

如何在 React 中组合多个类名？

How to combine multiple classNames in React?

reactjs

css-modules

class-names

tachyons-css