ホームページ > ウェブフロントエンド > CSSチュートリアル > ReactでCSSを書くさまざまな方法

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

William Shakespeare
リリース: 2025-03-13 10:44:09
オリジナル
263 人が閲覧しました

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 classname="{styles.font}">こんにちは世界</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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート