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

编程问答 2022-05-03

问题描述

我正在使用 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 类。

解决方法

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

  • 我更喜欢使用 classnames 库来以很好的方式处理类条件，只需要导入库并开始使用它..例如 enter image description here

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

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

css-modulesreactjsreactjsreactjsreactjs