React CSS - 特定のページのみにCSSを適用する方法

Question

私はcreate-react-appを使用しています。特定のページにスタイルシートを適用するための "効率的な"方法を試しています。

マイsrcフォルダ構造は次のようなものになります、私は見つけることだ、私はしかしimport './style.css'

使用index.jsのファイルにそれぞれ

| pages 
| - About 
| - - index.js 
| - - styles.css 
| - Home 
| - - index.js 
| - - styles.css 
| index.js 
| index.css 

を、私は次のページへ移動するときに開始ページのスタイルは、キャッシュされ、ターゲットページのスタイルが追跡されていないかのように、ターゲットページに適用されます。

リアクションを特定のページに適用する方法を誤解しているかどうかは不思議でした。私は完全にスタイルをincude自己完結型のコンポーネントを作っている必要がありますか？

インラインでの適用を検討していますが、JSスタイルを使用する際に制限があることを認識しています。

Answer 1

リアクションアプリを作成すると、すべてのCSSファイルが1つにまとめられ、すべてのスタイルがアプリ内のすべてのレンダリングされたコンポーネントで利用できるようになります。 CRAはシングルページアプリケーション（SPA）なので、「ページ」ではなく、DOMの「レンダリングされたコンポーネント」で考えることはできません。

あなたは複数のソリューションがあります。

1 - あなたの中に組織されたファイルをCSS：コンポーネント名で接頭辞すべてのクラス（BEMのような）の競合を避けるためか、使用するCSS hierachy .my-component > .my-class {...}

<div className="my-component"> 
    <span className="my-class">Hello</span> 
</div> 

2 - JSXファイル内のすべてのスタイルを宣言してください：

const styles= { 
    myComponent: { 
    fontSize: 200, 
    }, 
}; 
const myComponent =() => (
    <span style={styles.myComponent}>Hello</span> 
); 

あなたのスタイルはデフォルトでは接頭辞になりません。

3-取り出しまたはほとんどSingle Page Applications (SPA)を作成するために使用され、この設計によって意図はリロードしないようになっている反応するのでCSSModules（https://github.com/css-modules/css-modules）

Answer 2

を使用するように反応し、スクリプトのフォーク（CRAのエンジン）を使用ページ全体を何度も何度も繰り返します。したがって、スタイルシートも再ロードされません。

WebpackのようなバンドルでReactを使用している場合は、すべてのスタイルシートがバンドルされます。同じことがすべてのReactコンポーネントに適用されます。だからあなたはバンドルされたJSとバンドルされたCSSを得る。

なぜあなたはスタイルシートを分割したいのですか？

1. バンドルされたCSSファイルが小さくなります。
2. スタイルシートの名前は重複できますが、属性の設定は異なります。

最初の点は問題ありません。 2つめの点は、スタイルシートのルールを混乱させ、スタイルシートの一般的な部分をカスケードにすることはないため、良いデザインではありません。

CSSファイルが現在レンダリングされているページに必要なサイズよりも少し大きくなった場合でも、バンドル方式を採用することをおすすめします。

私の選択では、Reactコンポーネントはスタイルシートに依存してはいけません。コンポーネントを実装するだけで、子コンポーネントを除いて独立して動作させ、別のスタイルシートを使用して異なるアプリケーションで使用するようにしてください。

コンポーネントにインラインスタイルシートを使用しないでください。実際のReactコンポーネントを吹き飛ばすことになります。特に、アプリケーション全体で使用できるバンドルされたスタイルシートが使用されているため、