标签: tachyons-css

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

我正在使用 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 包 …

class-names reactjs css-modules tachyons-css

6
推荐指数
1
解决办法
3720
查看次数

标签 统计

class-names ×1

css-modules ×1

reactjs ×1

tachyons-css ×1