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

Question

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

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' ，所以它变成className='right'它仍然不起作用

Answer 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);
}

Answer 2

应该不是

var(--red)

和

var(--green)

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