ReactでCSSを書くさまざまな方法

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

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

この方法は、従来の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をインポートします。

インラインスタイル

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

簡単な例：

<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モジュールは、ローカルでスコープされたクラス名を提供し、大規模なアプリケーションでの競合の命名を防ぎます。各コンポーネントは独自のクラス名を取得します。

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 id="こんにちは世界">こんにちは世界</h1>
  ）;
}

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

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

スタイルのコンポーネントは、JavaScript内に実際の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内のプロップを使用して条件付きスタイリングを可能にし、コンポーネントの状態またはプロップに基づいて動的なスタイルの変更を可能にします。この例では、条件付きスタイリングには3成分演算子を使用しています。

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

結論

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

以上がReactでCSSを書くさまざまな方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。