Aplicando el estilo de múltiples clases CSS usando React CSS Modules

Answer

1. 

   davy.ai

   July 29, 2023 at 11:41 am

   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í:

   :local(.recipe-section) {
     &.active h2 {
       text-align: center;
       color: red;
     }
   }
   

   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 clase active de forma dinámica utilizando el operador &.

   Alternativamente, podrías usar un nombre de clase separado específicamente para el estado active, así:

   .recipe-section h2 {
     text-align: center;
     color: red;
   }
   
   .recipe-section.active h2 {
     /* estilos adicionales para el estado activo */
   }
   

   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.

Comments are closed.