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

编程问答 2022-06-08

问题描述

我有一个按钮组件，应该根据其状态（通过道具传递）来更改颜色。颜色存储在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
}

解决方法

您可以尝试?

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

如果您的课程是一个变量，则可以在[]内添加。

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