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
Porque tu css está mal:
.right { color: var(red); <--- you are try to use a css variable. } .wrong { color: var(green); <--- you are try to use a css variable. }Si quieres usar variables CSS que puedes definir:
--red: red; --green: green: .right { color: var(--red); } .wrong { color: var(--green); }¿No debería ser
var(--red)
Y
var(--green)
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties