web-dev-qa-db-ja.com

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

使ってます create-react-appそして私は特定のページにスタイルシートを適用するための「効率的な」方法を考え出そうとしています。

私のsrcフォルダ構造は次のようになります。

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

それぞれのindex.js私が使用するファイルimport './style.css'

ただし、あるページから次のページに移動すると、開始ページのスタイルがキャッシュされているかのようにターゲットページに適用され、ターゲットページのスタイルがフォローされていないことがわかりました。

Reactのスタイルを特定のページに適用する方法を誤解しているのではないかと思いました。スタイルも含む完全に自己完結型のコンポーネントを作成する必要がありますか？

インラインでの適用を検討していますが、JSスタイルの使用には限界があることに気づきました。

reactjscreate-react-app
7
tommyd456

Create reactアプリは、すべての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-CSSModulesを使用するためにreact-scripts（CRAのエンジン）のフォークを排出または使用します（ https://github.com/css-modules/css-modules ）

8
gouroujo

Reactは主に シングルページアプリケーション（SPA） の作成に使用され、この設計の目的はページ全体を何度もリロードしないことです。したがって、スタイルシートまた、リロードされません。

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

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

  1. バンドルされているCSSファイルが小さくなります。
  2. スタイルシート名を複製することはできますが、属性の設定は異なります。

最初のポイントは大丈夫です。 2番目のポイントは、紛らわしいスタイルシートルールを作成し、スタイルシートの一般的な部分であるカスケードを利用しないため、適切な設計ではありません。

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

私のオプションでは、Reactコンポーネントはどのスタイルシートにも依存しないはずです。コンポーネントを実装し、それを独立して動作させ（子コンポーネントを除く）、さまざまなスタイルシートを使用してさまざまなアプリケーションで使用します。

それでも、コンポーネントにインラインスタイルシートを使用しないでください。これは、実際のReactコンポーネントを爆破するためです。特に、バンドルされたスタイルシートがバンドルされているためにこれらのインラインスタイルが使用されない場合はそうです。アプリケーション全体。

3
Marc