CSS模块在另一个模块

Question

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

我需要实现以下目标，但在“css-modules＆＃39;方式：

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

如果我在.card模块中@import .stat，所有.card css都被转储到.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的强大功能，这是模块的一部分。所以我们有一个css-loader的分支，它允许你使用:ref()来引用导入的类：

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

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

Answer 2

作为一种解决方法，React toolbox人员使用一种方法向每个组件添加data-react-toolbox="component-name"或data-role="somerole"属性，并针对此类情况定位属性而不是必需的类。