如何在 CSS 模块中添加多个动态类？

Question

我正在使用CSS Modules

import style from "./styles/question.module.css";

// status[0] could be 0,1,2,3,4
<p className={style[`difficulty_${status[0]}`]}>{difficulty}</p>,

上面的代码可以工作，但是下面的代码不工作。

// tried to add more class
<p className={`${style.difficulty} ${style[`difficulty_${status[0]}`]}}`}>{difficulty}</p>

只应用difficulty 类。

Answer 1

您可以通过使用多个选项来做到这一点：

• 我更喜欢使用classnames lib 来很好地处理类条件，只需要导入库并开始使用它..例如

• 您可以使用 join 来构建所有需要的类

• 您可以在 className 之外构建所有需要的类并将其传递给 className，这样可以轻松检查错误在哪里，您也可以轻松控制值..