Para esta parte, estoy tratando de cambiar el color del texto según el índice de caracteres, pero el estilo simplemente no funciona.

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

También para tener en cuenta, si elimino la lógica para que se convierta en className='right' , todavía no funciona