React CSS Modules中statusClass绑定类名无法被CSS识别问题

样式不生效由两个问题共同导致：

• CSS Modules 类名引用方式错误：你使用的是CSS Modules方案，.module.css中定义的所有类名都会被编译成带哈希值的唯一标识，只有通过导入的classes对象访问到的类名，才是编译后能匹配到样式的有效值。你直接写裸字符串的statusClass类名没有经过编译，无法和CSS里的定义匹配。
• 状态映射存在拼写/大小写错误：映射对象里的keyIncorrect首字母大写、notAttempred拼写错误（正确拼写为notAttempted），如果传入的status值和key不匹配，会直接拿到undefined，也不会挂载对应的类。

不需要修改CSS文件，只需要调整组件代码，把状态类从classes对象中取值，同时修正拼写错误即可：

import React from "react";
import classes from "./TestLetter.module.css";

const TestLetter = ({ individualLetterInfo }) => {
  const { status } = individualLetterInfo;

  const statusClass = {
    correct: classes["test-letter-correct"],
    incorrect: classes["test-letter-incorrect"],
    notAttempted: classes["test-letter-not-attempted"],
  }[status] ?? classes["test-letter-not-attempted"]; // 加兜底值避免status异常时样式丢失

  return (
    <span className={`${classes["test-letter"]} ${statusClass}`}>
      {individualLetterInfo.testLetter}
    </span>
  );
};

export default TestLetter;

如果后续要加更多状态类，推荐用数组拼接类名的写法，可维护性更高：

<span className={[
  classes["test-letter"],
  statusClass
].join(' ')}>
  {individualLetterInfo.testLetter}
</span>

注意：请确保传入的individualLetterInfo.status取值和映射对象的key完全一致，否则会命中兜底样式。

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