React CSS Modules多动态类添加方法及类组合仅单类生效问题

你当前的多类名写法存在括号配对错误，动态类名拼接时多了一个多余的右大括号：
查看你写的动态类取值部分：${style[difficulty_${status[0]}]}}

• 模板字符串的插值规则是${ 表达式内容 }，当动态取值的表达式style[difficulty_${status[0]}]写完后，第一个右大括号就已经完成了插值闭合
• 你在这个闭合大括号后额外多写了一个}，这个字符会被直接拼接到最终生成的类名字符串末尾，让动态类名变成类似xxx_difficulty_0} 这种带非法符号的无效类名，无法匹配CSS Modules生成的真实哈希类名，自然不会生效。
• 而前面拼接的style.difficulty没有语法错误，生成的类名是有效的，所以只有这个基础类能被正常应用。

去掉多余的右大括号，用模板字符串正确拼接两个类名即可：

<p className={`${style.difficulty} ${style[`difficulty_${status[0]}`]}`}>{difficulty}</p>

为了避免模板字符串嵌套出现的括号配对错误，可以改用数组拼接的方式，每个类名单独作为数组元素，最后用空格拼接为类名字符串：

<p className={[
  style.difficulty,
  style[`difficulty_${status[0]}`]
].join(' ')}>{difficulty}</p>

这种写法的优势：

• 不需要嵌套多层模板字符串的括号，从根本上避免括号错配问题
• 后续如果需要新增动态类、增加条件判断类，只需要在数组里增删元素即可，可读性更强
• 数组join的方式会自动处理类名之间的空格分隔，不会出现类名连写、多余空格的问题

• 所有要使用的CSS Modules类名，必须是从导入的style对象上取值的属性，不能直接写原生类名字符串（除非是项目里定义的全局类名）
• 拼接类名时要确保每个类名之间有空格分隔，否则会被浏览器识别为单个无效类名

内容的提问来源于stack exchange，提问作者Rahul kumar