CSSモジュールのホバースタイルは別のモジュールの中にある

Question

CSS modulesのReact/Webpackアプリでは、自分自身の.scssファイルにモジュール.cardがあり、.cardに表示されるコンテンツが.statという別のモジュールがあります。私は次のことを達成するために必要なもの

が、「CSS-モジュールの道INT：

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

私は.statモジュール内.cardを@import場合、.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モジュールの強みを使いたいと思います。 React toolbox男は、すべてのコンポーネントにdata-react-toolbox="component-name"またはdata-role="somerole"属性を追加し、代わりの属性をターゲットにアプローチを使用する回避策として

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

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

Answer 2

：だから私たちは、あなたがインポートされたクラスを参照するために:ref()を使用することができますcss-loaderのフォークを持っていますそのような状況のために必要な場合にはクラス。