React项目中CSS类不生效，无法按字符索引修改文本颜色如何解决？

• 核心错误是CSS语法使用错误：你代码中的var(red)、var(green)属于无效写法。var()函数仅用于调用预先定义的CSS自定义属性（CSS变量），直接使用内置颜色关键字不需要套var()，如果要使用var()需要先定义对应变量。
• 排查CSS文件引入路径是否正确：确认../stylesheets/TypingTest.css的相对路径和你的项目文件结构匹配，路径错误会导致样式完全不生效。
• 排查项目是否启用了CSS Modules：如果你的React脚手架配置了CSS Modules规则（通常文件名带.module.css后缀时默认启用），直接写字符串类名无法命中编译后的类名，需要通过导入的样式对象调用类名。

修正方案 #

方案1：不使用CSS变量，直接写颜色值（最简单） #

修改CSS代码为：

.right{
    color: red;
}
.wrong{
    color: green;
}

方案2：正确使用CSS变量 #

先定义CSS变量再调用：

/* 先在全局作用域定义变量 */
:root {
  --text-red: #f00;
  --text-green: #0f0;
}
.right{
    color: var(--text-red);
}
.wrong{
    color: var(--text-green);
}

方案3：适配CSS Modules场景 #

如果项目开启了CSS Modules，先把CSS文件重命名为TypingTest.module.css，再修改组件代码：

import styles from "../stylesheets/TypingTest.module.css"

const TypingTest = (props) => {
  return (
    <div>
      <div>
        {/* 列表渲染补充key属性避免React警告 */}
        {props.words.split("").map(function (char, idx) {
          return (
            <span key={idx} className={props.index === idx ? styles.right : styles.wrong}>
              {char}
            </span>
          );
        })}
        <div>{props.index}</div>
      </div>
    </div>
  );
};

export default TypingTest;

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