我正在使用 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 上的这个链接讨论了两个包之间的性能差异。