26

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

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

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

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

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

4

2 回答 2

8

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

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

:ref(.importedCard):hover .stat {...}
于 2016-03-24T05:29:54.647 回答
7

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

于 2016-03-30T11:03:05.327 回答