6

我正在使用 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正是我想要实现的。安装 clsx 后

npm install --save clsx 

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

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

20 年 5 月 17 日更新:

正如 Sandip 指出的那样,ClassNames 包和 clsx 包可以用来实现相同的行为。这两个软件包的每周下载量甚至表明 ClassNames 的使用频率比 CLSX 高得多(截至 2020 年 5 月 17 日,每周下载量约为 5.2 mio 与约 1.6 mio)。github 上的这个链接讨论了两个包之间的性能差异。

4

1 回答 1

2

没有任何包装:

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

就像您已经提到的那样,包clsx非常好:

className={clsx(styles.examplecomponentstyle, "pa5 bg-yellow")}
于 2020-08-28T11:48:03.147 回答