CSS стили модуля при наведении курсора, когда внутри другого модуля

Question

В React/приложении WebPack с CSS modules у меня есть модуль .card в своем собственном файле .scss, а другой модуль с именем .stat, который содержанием будут показаны в .card.

Что мне нужно, чтобы достигнуть следующего, но Int путь «CSS-модули»:

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

Если я @import .card внутри .stat модуля, все .card КСС сбрасывается в .stat выход , но я хочу только иметь правильное имя класса для .card.

Каков правильный способ решения проблемы?

Answer 1

У нас была аналогичная проблема при использовании модулей CSS. Я открываю вопрос https://github.com/css-modules/css-modules/issues/102 и было предложено мне, что я должен сделать что-либо одно из следующих действий:

1. Clone компонент и добавить новый атрибут Classname к нему и составить новый класс со старым классом:

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

2. Wrap компонент в другой элемент и добавить имя класса к этому:

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

Мне не понравился ни один из этих подходов, и я бы хотел использовать силу css-модулей, которые являются частью модулей. Таким образом, мы имеем вилку css-loader, которая позволяет использовать :ref() ссылаться на импортируемые классы:

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

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

Answer 2

В качестве обходного React toolbox ребята используют подход, чтобы добавить data-react-toolbox="component-name" или data-role="somerole" атрибут каждого компонента и целевого атрибута вместо классы, где это необходимо для таких ситуаций.