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

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

Что мне нужно для достижения следующего, но int 'css-modules' образом:

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

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

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

Ответ 1

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

Клонируйте компонент и добавьте к нему новый атрибут className и создайте новый класс со старым классом:
```
// Card.js
React.cloneElement(component, {
  className: styles.card, 
});

// styles.cssmodule 
.card {
  composes: card from "...card.cssmodule"; 
}
```
Оберните компонент в другой элемент и добавьте к нему имя класса:
```
<div className={styles.card}><MyComponent /></div>
```

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

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

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

Ответ 2

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