为什么我的 css 类在我的 React 项目中不起作用？答案

【问题标题】：Why are my css classes not working in my React project?为什么我的 css 类在我的 React 项目中不起作用？
【发布时间】：2023-04-03 23:26:01
【问题描述】：

对于这一部分，我正在尝试根据字符索引更改文本的颜色，但样式不起作用。

import "../stylesheets/TypingTest.css"

const TypingTest = (props) => {
  return (
    <div>
      <div>
        {props.words.split("").map(function (char, idx) {
          return (
            <span className={props.index === idx ? "right" : "wrong"}>
              {char}
            </span>
          );
        })}
        <div>{props.index}</div>
      </div>
    </div>
  );
};

export default TypingTest;

.right{
    color: var(red);
}
.wrong{
    color: var(green);
}

另外需要注意的是，如果我把逻辑去掉所以它变成className='right'它仍然不起作用

【问题讨论】：

red 和 green 不是有效的 CSS 变量名，它们需要以 -- 为前缀。见here
但不是 100% 清楚您要做什么 - 如果这些不是 CSS 变量，而只是标准颜色 red 和 green，请不要使用 @ 987654330@ 就做（例如）color: red;
有一个包调用classnames，是动态css的npm i classnames

标签： javascript css reactjs

【解决方案1】：

因为你的css错了：

.right {
    color: var(red); <--- you are try to use a css variable.
}
.wrong {
    color: var(green); <--- you are try to use a css variable.
}

我想使用你可以定义的css变量：

--red: red;
--green: green:

.right {
    color: var(--red);
}
.wrong {
    color: var(--green);
}

【讨论】：

【解决方案2】：

不应该

var(--red)

和

var(--green)

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

【讨论】：