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

Posted 2023-03-16

【中文标题】如何在 React 中组合多个类名？

【英文标题】：How to combine multiple classNames in React?

【发布时间】：2019-12-22 17:36:56

【问题描述】：

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

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

<ExampleComponent className="examplecomponentstyle pa5"/>

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

<ExampleComponent className=styles.examplecomponentstyle/>

现在如何将这种语法与之前使用的 tachyons 样式结合起来？有这样的东西可以工作吗？：

<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 指出的那样，ClassNames package 和 clsx 包可用于实现相同的行为。这两个软件包的每周下载量甚至表明 ClassNames 的使用频率比 CLSX 高得多（截至 2020 年 5 月 17 日，每周下载量约为 5.2 mio 与约 1.6 mio）。 github 上的This link 讨论了两个包之间的性能差异。

【问题讨论】：

您甚至可以使用npmjs.com/package/classnames。

您好 Sandip，感谢您的回答，classnames 无疑也是一个很好的解决方案，并且可能使用得更频繁。这个link 非常有趣，因为这两个包的性能略有不同

【参考方案1】：

没有任何包装：

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

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

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