如何使用 clsx 有条件地渲染 css？

Posted 2023-02-22

【中文标题】如何使用 clsx 有条件地渲染 css？

【英文标题】：How to conditionally render css with clsx?

【发布时间】：2021-01-30 12:47:59

【问题描述】：

我有一个按钮组件，它应该根据其状态（由道具传递）改变颜色。颜色存储在 css 文件中。我读到 clsx npm 很好用，但我不太了解它的documentation。如何使用 clsx 有条件地呈现我的按钮？

  import  colors from './colors.css'

  <MyButton
        className=cx( ) //<------ ???
      />

还有我的 colors.css 文件：

.accept 
  background-color: green


.reject 
  background-color: red


.warning 
  background-color: orange

【问题讨论】：

尽量不要错过分号：***.com/questions/11939595/…

【参考方案1】：

你可以试试这个?

<MyButton className=clsx( 'your-class-name': yourConditional ) />

如果你的类是一个变量，你可以在里面添加[]。

<MyButton className=clsx( [yourClassName]: yourConditional ) />