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

Question

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

在使用 CSS 模块之前，我曾经通过具有多个 className 来定义一个类和 tachyons 样式(在本例中为 padding5)。
例如:

<ExampleComponent className="examplecomponentstyle pa5"/>

使用 CSS 模块时，CSS 类定义现在如下所示:

<ExampleComponent className={styles.examplecomponentstyle}/>

现在如何将此语法与先前使用的 tachyons 样式相结合？有没有这样的东西可以工作？:

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

非常感谢!

19 年 9 月 5 日更新:

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

npm install --save clsx 

ExampleComponent 然后可以例如使用 clsx 进行样式设置，如下所示:

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

20 年 5 月 17 日更新:

正如 Sandip 指出的 ClassNames package can 以及 clsx 包可用于实现相同的行为。两个软件包的每周下载量甚至表明 ClassNames 的使用频率比 CLSX 高得多(截至 2020 年 5 月 17 日，每周下载量约为 5.2 mio，而每周下载量约为 1.6 mio)。 This link在 github 上讨论了两个包之间的性能差异。

Answer 1

没有任何包装:

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

就像你已经提到的，包 clsx很不错:

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