ReactJSいくつかのCSSファイル

Question

ReactJSを使ってSPAをビルドしていますが、スタイリングに関して3つの異なるページがあります（私は将来さらにページを追加します）ので、各ファイルに独自のCSSファイルがあります。この

*index.jsx 
import index form './index.css'* 

*page2.jsx 
import page3 form './index.css'* 

*page3.jsx 
import page3 form './index.css'* 

ようなので、私は（インデックス）ページに移動したときに、ブラウザで開いているサイト、それは大丈夫だが、私は、次のページ（PAGE2）に行くとき、再度クリックすると（インデックス）に行く 2つのCSSファイルに同じ名前のクラスがいくつかあり、読み込まれた2番目のCSSファイルがあるためページスタイルが変更されています（page2.css）は（index.css）をオーバーライドしました。

申し訳ありませんが、質問があまり明確でない場合は、

ありがとう！

Answer 1

異なるコンテキストを区別する方法を見つける必要があります。コードを見ることなく言うのは難しいですが、各ページにIDを適用できる親要素がある場合は、CSSセレクタにこれを含めて、それぞれの場合に実際にスタイルを設定する要素をターゲットにすることができます。

div#inIndex .myStyle { 
    /* styles */ 
} 

div#inPage2 .myStyle { 
    /* styles */ 
} 

div#inPage3 .myStyle { 
    /* styles */ 
} 

これは機能しますが、別のクラス名を使用するだけでは不思議なのですか？