在另一个模块内时的 CSS 模块悬停样式答案

【问题标题】：CSS module hover styles when inside another module在另一个模块内时的 CSS 模块悬停样式
【发布时间】：2016-07-07 23:10:18
【问题描述】：

在带有CSS modules 的 React/Webpack 应用程序中，我在自己的 .scss 文件中有一个模块 .card，还有一个名为 .stat 的模块，它是在 .card 中显示的内容。

我需要实现以下目标，但采用“css-modules”方式：

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

如果我在.stat 模块中@import .card，所有.card css 都被转储到.stat 输出中，但我只想能够为@987654330 使用正确的类名@。

解决问题的正确方法是什么？

【问题讨论】：

【解决方案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-modules 的优势，它是模块的一部分。所以我们有一个css-loader 的分支，它允许您使用:ref() 来引用导入的类：

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

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

【讨论】：

【解决方案2】：

作为一种解决方法，React toolbox 伙计们使用一种方法为每个组件添加data-react-toolbox="component-name" 或data-role="somerole" 属性，并在这种情况下以属性而不是类为目标。

【讨论】：