ReactJSとclassNames

Question

私はReactJSの新機能で、現在MERNスタックを使用して新しいアプリケーションを作成しています。 私はそれらをインポートすることで、外部スタイルシートを使用することができることを、知っている： import styles from ./Header.css

使用法：

<div className={styles["logo-home"]}> 
    test 
</div> 

.cssファイル：これは私がちょうどすることができます正常に動作しているが、

.logo-home { 
    background-color: #eee; 
} 

何かにアクセスする方法を調べる：

.logo-home .inner { 
    background-color: #000; 
} 

私はstyles["logo-home"].innerやstyles.innerのようなものを書いたが、これはうまくいかないと思ったが、それはしなかった...

この問題を解決する正しい/最善の方法は何ですか？

Answer 1

MERN starter repoをクローンしている場合は、おそらくwebpackの設定によるCSSモジュールを使用している可能性があります。

ここでのアイデアは、独自のスコープを持つモジュラー形式のスタイルを持っているということです。これは、各クラス名にハッシュを追加することで実現されます。この例のように：

.logo-home { /* ... */ } 
.inner { /* ... */ } 

ご覧のとおり、必要はありません。

だからあなたのインポート.cssファイルは次のように見ることができますが、

<div className={styles["logo-home"]}> 
    <div className={styles["inner"]}> 
     bla bla bla 
    </div> 
</div> 

を持っていると仮定伝統的なCSSで使用するCSSセレクタ用です。各コンテナを1つのクラス名でマップするだけで、CSSModulesはクラス名がすべてのモジュール間で衝突しないようにします。

あなたはCSSModuleの詳細を読むことができますhere