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

Question

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

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

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

如果我在 .stat 模块中@import .card，则所有 .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 的 fork 它允许您使用 :ref() 引用导入的类:

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

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