Tengo un módulo JSX (card.jsx) que llama a otro componente para crear 5 instancias de este módulo (card.jsx).
import card.css ... <div className='cistern'> <div className="shape"> <div className="wave"></div> </div> </div>en mi card.css, tengo una llamada de propiedad personalizada llena .
.wave { position: absolute; --filled: 20%;en mi card.jsx trato de establecer un valor diferente para la variable personalizada css " llena ".
React.useEffect(() => { var cisternProperty = document.querySelector( '.wave' ) cisternProperty.style.setProperty('--filled', showFilledRoundString) console.log('show Tank Level', showFilledRoundString) }, [])solo la primera instancia usa el nuevo valor, todas las demás instancias usan el valor predeterminado " llenado " establecido en el archivo css. ¿Qué esta pasando? ¿Cuál podría ser la solución? Gracias
Para cambiar la propiedad CSS para cada instancia de un elemento en la clase .wave, puede cambiar la propiedad en algún elemento antepasado común en lugar de en los elementos .wave en sí o puede revisar todos los elementos .wave y cambiar su propiedad.
Entonces, en lugar de usar querySelector, que le brinda solo el primer elemento de esa clase, use querySelectorAll, que le brinda una colección de todos los elementos de esa clase. Luego puede recorrerlos configurando la variable CSS individualmente para cada uno:
var cisternProperties = document.querySelectorAll( '.wave' ); cisternProperties.forEach( cisternProperty => { cisternProperty.style.setProperty('--filled', showFilledRoundString); });