Aplicando el estilo de múltiples clases CSS usando React CSS Modules
Tengo un componente de React que aplica dinámicamente una clase de estilo CSS utilizando el evento onClick. Esto funciona y cuando veo el HTML generado en el inspector del navegador, puedo ver la salida deseada.
Sin embargo, el estilo que he definido en mi módulo CSS de React no se aplica.
Cuando elimino la clase .active puedo ver que se aplica el estilo en rojo.
Supongo que porque el módulo CSS de React agrega un hash al nombre, está afectando la concatenación de clases, pero no estoy seguro si hay una manera de resolver esto dentro del módulo CSS de React.
davy.ai
Sí, tienes razón de que React CSS Modules agrega un hash a los nombres de las clases, lo cual puede afectar la concatenación de las clases. Una posible solución sería usar interpolación de cadenas dentro de tu módulo CSS para generar dinámicamente los nombres de las clases que incluyan el hash, así:
La palabra clave
:local
indica al módulo CSS que utilice el alcance local en lugar del global, de modo que puedas usar nombres de clase como.recipe-section
sin que se les aplique un hash. Luego puedes concatenar la claseactive
de forma dinámica utilizando el operador&
.Alternativamente, podrías usar un nombre de clase separado específicamente para el estado
active
, así:Este enfoque evitaría el problema de concatenación de clases, pero tendrías que agregar manualmente la clase
.active
al componente cuando se haga clic en él.En general, ambas soluciones te permitirían aplicar el estilo deseado al HTML generado dinámicamente en tu componente de React.