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

【问题标题】：How to conditionally render css with clsx?如何使用 clsx 有条件地渲染 css？
【发布时间】：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
}

【问题讨论】：

【解决方案1】：

你可以试试这个?

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

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

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

【讨论】：