我正在使用 Create-React-App 编写一个小型 React 应用程序。对于简单的样式调整,我使用 tachyons-css。由于频繁出现的 CSS 样式问题,我最近从经典的 CSS 样式切换到了 CSS 模块(也是 SCSS 的有效问题)。现在我想知道是否有一种方法仍然可以同时使用 CSS 模块和 tachyons 样式,即使不再可能只向 CSS 模块样式对象添加一个额外的“经典”className。
在使用 CSS 模块之前,我曾经通过具有多个 className 来定义一个类和 tachyons 样式(在本例中为 padding5)。例如:
<ExampleComponent className="examplecomponentstyle pa5"/>
Run Code Online (Sandbox Code Playgroud)
使用 CSS 模块时,CSS 类定义现在如下所示:
<ExampleComponent className={styles.examplecomponentstyle}/>
Run Code Online (Sandbox Code Playgroud)
现在如何将此语法与先前使用的 tachyons 样式相结合?有没有这样的东西可以工作?:
<ExampleComponent className={styles.examplecomponentstyle & "pa5"}/>
Run Code Online (Sandbox Code Playgroud)
非常感谢!
19 年 9 月 5 日更新:
该clsx包正好在做什么,我试图实现。安装 clsx 后
npm install --save clsx
Run Code Online (Sandbox Code Playgroud)
例如,可以使用 clsx 对 ExampleComponent 进行样式设置,如下所示:
<ExampleComponent className={clsx(styles.examplecomponentstyle, "pa5 bg-yellow")}/>
Run Code Online (Sandbox Code Playgroud)
20 年 5 月 17 日的更新:
正如 Sandip 指出的,ClassNames 包 …