CSS模块在另一个模块内部悬停样式

Question

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

我需要实现以下内容,但以"css-modules"方式:

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

如果我.card在.stat模块内部@import ,所有的.cardcss都被转储到.stat输出中,但我只希望能够使用正确的类名.card.

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

Answer 1

我们在使用CSS模块时遇到了类似的问题.我打开一个问题https://github.com/css-modules/css-modules/issues/102,有人建议我应该做以下任何一种情况:

1. 克隆组件并为其添加新的className属性,并使用旧类组成新类:

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

2. 将组件包装在另一个元素中,并将类名添加到此:

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

我不喜欢这些方法中的任何一种,我想使用css-modules的强大功能,这是模块的一部分.所以我们有一个fork,css-loader它允许你:ref()用来引用导入的类:

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

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

Answer 2

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