reactjs - 在另一个模块内时的 CSS 模块悬停样式

Question

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

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

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

.card如果我在模块内@import .stat，所有的.cardcss 都会被转储到.stat输出中，但我只想能够为.card.

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

score 8 · Accepted Answer

我们在使用 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 的优势，这是模块的一部分。所以我们有一个 forkcss-loader允许您使用它:ref()来引用导入的类：

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

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

score 7 · Accepted Answer

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

2 回答 2