CSSモジュールとReactJS：異なるコンポーネントの親と子のCSSクラス

Question

私は反応アプリケーションを構築していて、簡単な質問があります。 2つの別々のコンポーネントがある場合： と CSSクラスnavigation.cssとnavigationLogo.cssがそれぞれあります。 navigation.cssでは、私は.mainという名前のクラスを持っているとnavigationLogo.cssに私はそうのようなクラスを持つようにしたい：

.main .main_in_logo { 
color: red; 
} 

しかし、CSSモジュールで、私は、周りの仕事上の任意のアイデアを、これを行うことができませんか？

Answer 1

子コンポーネントは、親CSSクラス名に依存するCSSルールを持つべきではありません。

子供はちょうど次のようになります。

.main_in_logo { color: red; } 

あなたは必要は、親と子の両方が関与するスタイルを定義する場合、最も簡単な方法は、親に完全にスタイルを定義することです：

/* navigation.css */ 
.main .main_in_logo { 
    color: red; 
} 

次に、親がcssクラスを子に渡して、子にそれを使用するように指示します。

// Navigation.js 
<NavigationLogo className={navigationCss.main_in_logo} /> 

// NavigationLogo.js 
<div className={"foo " + this.props.className}>stuff</div> 

Answer 2

.main .main_in_logoを作成する必要があるのはなぜですか？親要素を持つスタイルの主なアイデアは、今後他のスタイルでCSSを壊さないことです。しかし、あなたのスタイルは永遠にユニークなので、CSSモジュールでは不可能です。

でも、これらの2つのコンポーネントにはグローバルcssを使用する必要があります。documentationについては、react-css-modulesのグローバルcssを参照してください。