反应中的动态 css 类

Question

我正在尝试动态添加 css 类。

我有一组颜色，我想在每次渲染组件时获得随机颜色。

这是我所做的：

import styles from './UsersBoxItem.module.scss'
let colors = ['red', 'blue', 'green', 'pink', 'orange'];

class UsersBoxItem extends Component {
    render() {
        let colorClass = colors[Math.floor(Math.random() * colors.length)];
        colors = colors.filter(item => item !== colorClass)
        return (
            <div className={`${styles.box} ${styles.colorClass}`}>

我正在使用 css-modules，但是这个 ${styles.colorClass} 不起作用，我没有定义。

这是我的代码：https://codesandbox.io/embed/cocky-cloud-lomzr

有什么想法吗？谢谢

Answer 1

您需要在 CSS 中添加实际的 class 声明。

.red {
  color: red;
}
.blue {
  color: blue;
}
.green {
  color: green;
}
.pink {
  color: pink;
}
.orange {
  color: orange;
}

分叉沙箱

Answer 2

@Sung M. Kim 解决方案工作正常，我不认为你想要什么。

https://codesandbox.io/s/thirsty-lewin-k3j1y

反应中的动态 css 类

Dynamic css classes in react

reactjs

css-modules