style CSS hover p gdy moduł wewnątrz innego modułu

Question

W React/WebPACK aplikacji z CSS modules Mam moduł .card we własnym pliku .scss i inny moduł nazwany .stat który jest zawartość mają być pokazane w .card.

Co potrzebne do osiągnięcia następujących, ale int sposób 'CSS-modules':

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

Gdybym @import .card wewnątrz modułu .stat, wszystkie .card CSS jest wrzucano do wyjścia .stat , ale chcę tylko móc użyć poprawnej nazwy klasy dla .card.

Jaki jest właściwy sposób rozwiązania problemu?

Answer 1

Podobny problem wystąpił w przypadku korzystania z modułów CSS. Otwieram problem https://github.com/css-modules/css-modules/issues/102 i sugerowano mi, że powinienem zrobić, albo jedną z następujących czynności:

1. Clone komponent i dodać nowy atrybut className do niej i komponować nową klasę ze starej klasy:

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

2. owijane składnik w innym elemencie i dodać nazwę klasy do tego:

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

Nie podobało mi się żadne z tych podejść i chciałbym użyć siły modułów css, która jest częścią modułów. Więc mamy widelec z css-loader który pozwala na użycie :ref() odwołać importowane klasy:

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

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

Answer 2

Jako obejście React toolbox faceci wykorzystać podejście dodać atrybut data-react-toolbox="component-name" lub data-role="somerole" do każdego komponentu i kierować atrybut zamiast klasy tam, gdzie jest to konieczne dla takich sytuacji.