如何解决如何使用clsx有条件地渲染CSS?
我有一个按钮组件,应该根据其状态(通过道具传递)来更改颜色。颜色存储在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 })} />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。