Estoy codificando este front-end con el marco NextJS y después de que el usuario haga clic en el botón de destino, se agregará una clase a un div específico. Se supone que esta clase cambia el estilo div, una vez que agregué estilos únicos a esta clase en mi archivo css.
El elemento original:
<div class="Home_wordBlockWrapper__nwyZO" id="generated-block"><h3>C</h3></div>El elemento después de hacer clic en el botón:
<div class="Home_wordBlockWrapper__nwyZO filled rightindex" id="generated-block"><h3>C</h3></div>Archivo CSS:
.wordBlockWrapper { border: 2px solid rgb(226, 232, 240); border-radius: 5px; width: 50px; height: 50px; } .wordBlockWrapper { justify-content: center; align-items: center; text-align: center; display: flex; transition: .5 ease-in-out; } .filled { border: 2px solid black; }El problema es: aunque se agrega la clase, el estilo div sigue siendo el mismo. ¿Saben dónde está el error?
Bueno, no resolví mi pregunta de la manera habitual. Pero, de todos modos, mi solución fue: en lugar de intentar agregar una clase al elemento y luego estilizarlo en el archivo css, agregué un script JS para agregar los estilos en el elemento del documento, obteniéndolo por su id.
Solución:
var tb = document.getElementsByClassName(styles.wordBlockWrapper)[matching.index] var targBlockId = document.getElementById(tb.id); if(targBlockId !== null) { targBlockId.style.backgroundColor = "#13d178" targBlockId.style.color = "#fff" }De esta manera, el problema se resuelve agregando los estilos con un script JS, en lugar de agregar una clase a su classList y luego estilizarla con archivos css.