reactjs - estilos - css react

Módulos CSS para desplazarse por los estilos dentro de otro módulo.

Question

En una aplicación React / Webpack con módulos CSS tengo un módulo .card en su propio archivo .scss y otro módulo llamado .stat que es un contenido que se muestra en el .card .

Lo que necesito para lograr lo siguiente, pero en la forma de ''css-modules'':

.card:hover .stat {
    color: #000;
}

Si I @import .card dentro del módulo .stat , todo .card css se descarga en la salida de .stat , pero solo quiero poder usar el nombre de clase correcto para .card .

¿Cuál es la forma correcta de resolver el problema?

Answer 1

Como una solución alternativa, los chicos de la caja de herramientas React utilizan un método para agregar un atributo data-react-toolbox="component-name" o data-role="somerole" a cada componente y apuntan al atributo en lugar de clases donde sea necesario para tales situaciones.

Answer 2

Tuvimos un problema similar en nuestro uso de los módulos CSS. Abro un número https://github.com/css-modules/css-modules/issues/102 y se me sugirió que hiciera una de las siguientes acciones:

1. Clone el componente y agregue un nuevo atributo className y componga la nueva clase con la clase antigua:

   // Card.js
   React.cloneElement(component, {
     className: styles.card, 
   });
   
   // styles.cssmodule 
   .card {
     composes: card from "...card.cssmodule"; 
   }

2. Envuelva el componente en otro elemento y agregue el nombre de clase a esto:

   <div className={styles.card}><MyComponent /></div>

No me gustó ninguno de estos enfoques y me gustaría usar la fuerza de css-modules que es la parte de los módulos. Así que tenemos una bifurcación del css-loader que le permite utilizar :ref() para hacer referencia a las clases importadas:

:import(''...card.cssmodule`){
  importedCard: card;
}

:ref(.importedCard):hover .stat {...}