Why are my css classes not working in my React project?-CodePudding

For this one part I am trying to change the color of the text based on the character index, but the styling just is not working.

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

Also to note, if I take the logic out of the so it becomes className='right' it still does not work

CodePudding user response：

Because your css is wrong:

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

I you want to use css variables you can define:

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

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

CodePudding user response：

Should it not be

var(--red)

And

var(--green)

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