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
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);
}
Should it not be
var(--red)
And
var(--green)
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties