私たちは皆、スタイルシートをHTMLにリンクする方法を知っています、しかし、Reactシングルページアプリケーション（SPA）のスタイリングはより多くのオプションを提供します。反応におけるCSSへのさまざまなアプローチを探り、それらの長所と短所を強調(diào)しましょう。

外部スタイルシートのインポート

この方法は、従來のCSSリンクを反映しています。

1. CSSファイル（例： style.css ）を作成します。
2. CSSルールを作成します。
3. Reactコンポーネントにインポートします。

インポート "./style.css";

例：

 「React」からのImport React;
Import "./components/css/app.css";

function app（）{
  戻る （
    <div classname="main"></div>
  ）;
}

デフォルトアプリをエクスポートします。

これにより/Components/cssフォルダーからApp.cssをインポートします。

インラインスタイル

保守性の懸念のために大規(guī)模なプロジェクトには一般的に落膽していますが、特定のコンテキストではインラインスタイルは実用的です。 Reactのコンポーネント構(gòu)造は、いくつかの保守性の問題を軽減します。

簡単な例：

<div classname="main" style="{{" color:></div>

より組織化されたアプローチは、スタイルオブジェクトを使用します：

 「React」からのImport React;

function app（）{
  const styles = {
    主要： {
      BackgroundColor： "＃f1f1f1"、
      幅：「100％」、
    }、
    inputText：{
      パディング：「10px」、
      色：「赤」、
    }、
  };
  戻る （
    <div classname="main" style="{styles.main}"></div>
  ）;
}

デフォルトアプリをエクスポートします。

これはstylesオブジェクトで定義されたスタイルを適用します。オブジェクトの參照のための巻き毛裝具の使用に注意してください。

CSSモジュール

CSSモジュールは、ローカルでスコープされたクラス名を提供し、大規(guī)模なアプリケーションでの競合の命名を防ぎます。各コンポーネントは獨自のクラス名を取得します。

1. .module.cssファイルを作成します（例： styles.module.css ）。
2. Reactコンポーネントにインポートします。
3. classNameでインポートされたスタイルを使用します。

 / * styles.module.css */
.font {
  色：＃f00;
  フォントサイズ：20px;
}

 「React」からのImport React;
"./styles.module.css"からスタイルをインポートします。

function app（）{
  戻る （
    <h1 classname="{styles.font}">こんにちは世界</h1>
  ）;
}

デフォルトアプリをエクスポートします。

スタイルのコンポーネント

スタイルのコンポーネントは、JavaScript內(nèi)に実際のCSSを記述し、スタイルの反応コンポーネントを作成する方法を提供します。利點には、ユニークなクラス名、動的スタイリング、より良いCSS組織が含まれます。

インストール： npm install styled-components

インポート： import styled from 'styled-components';

例：

 「React」からのImport React;
「スタイルコンポーネント」からスタイルのインポート。

const wrapper = styled.div`
  幅：100％;
  高さ：100px;
  背景色：赤;
  表示：ブロック;
`;

function app（）{
  戻る<wrapper></wrapper>;
}

デフォルトアプリをエクスポートします。

條件付きスタイリング

スタイルのコンポーネントは、CSS內(nèi)のプロップを使用して條件付きスタイリングを可能にし、コンポーネントの狀態(tài)またはプロップに基づいて動的なスタイルの変更を可能にします。この例では、條件付きスタイリングには3成分演算子を使用しています。

（Brevityのために省略した條件付きスタイリングを示すコードの例ですが、概念は説明されています。）

結(jié)論

Reactは、多様なCSSスタイリングオプションを提供します。最良のアプローチは、プロジェクトのサイズ、複雑さ、個人的な好みに依存します。この概要は、Reactプロジェクトに適した方法を選択するための強固な基盤を提供します。

以上がReactでCSSを書くさまざまな方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。