CSS を使用して React をスタイルする 5 つの方法 [2023]

Web サイトの 97% 以上がスタイル設定に CSS を使用していることをご存知ですか?

カスケード スタイル シート (CSS) を使用すると、開発者は見栄えがよく、スキャン可能で、表示可能な Web ページを作成できます。

CSS 言語は、ドキュメントがユーザーにどのように表示されるかを指定します。 この場合のドキュメントは、XML や HTML などのマークアップ言語で記述されたファイルです。

Reactのスタイリングとは?

React アプリの作成、実行、および保守のシンプルさが、その人気の主な理由です。 React はフレームワークではなく JavaScript ライブラリであり、事前に作成された関数やコード スニペット以上のものを提供します。

再利用可能なコンポーネントの可用性、その柔軟性、コードの安定性、速度、およびパフォーマンスは、JavaScript フレームワークおよびライブラリの中で React が上位にランク付けされている理由の一部です。

React でのスタイリングは、CSS を使用して視覚的に魅力的な React アプリのさまざまなコンポーネントを作成するプロセスです。 ただし、React はマークアップ言語として HTML ではなく JSX (JavaScript および XML) を使用することに注意してください。 主な違いの 1 つは、HTML では .class を使用してクラスにラベルを付けるのに対し、JSX では .ClassName を使用して同じことを示すことです。

CSS を使用して React のスタイルを設定する必要があるのはなぜですか?

• アプリをレスポンシブにします。 最新の Web アプリは、小さな画面と大きな画面の両方でアクセスできる必要があります。 CSS を使用すると、メディア クエリを React アプリに適用して、さまざまな画面サイズに対応させることができます。
• 開発プロセスをスピードアップします。 React アプリの複数のコンポーネントで同じ CSS ルールを使用できます。
• React アプリを保守可能にします。 CSS を使用すると、アプリの特定のコンポーネントやパーツの外観を簡単に変更できます。
• ユーザー エクスペリエンスの向上。 CSS は、ユーザーフレンドリーな書式設定を可能にします。 論理的な場所にテキストとボタンを配置した React は、ナビゲートと使用が簡単です。

開発者が React アプリのスタイルを設定するために使用できるいくつかのアプローチがあります。 以下は、最も一般的なものの一部です。

インライン スタイルを記述する

インライン スタイルは、ユーザーが外部スタイルシートを作成する必要がないため、React アプリのスタイルを設定する最も簡単な方法です。 CSS スタイルは、React コードに直接適用されます。

インライン スタイルは他のスタイルよりも優先されることに注意してください。 したがって、書式設定を含む外部スタイル シートがある場合、インライン スタイルによって上書きされます。

これは、React アプリでのインライン スタイルのデモンストレーションです。

import React from 'react';

import ReactDOM from 'react-dom/client';

const Header = () => {

  return (

    <>

      <h1 style={{backgroundColor: "lightblue"}}>Hello World!!!!!</h1>

      <h2>Add a little style!</h2>

    </>

  );

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Header />);

表示された要素には、水色の背景を持つ h1 が表示されます。

インライン スタイリングの長所

• 素早い。 スタイルを設定したいタグに直接スタイルを追加するので、これは最も簡単な方法です。
• 好みが強い。 インライン スタイルは、外部スタイルシートをオーバーライドします。 したがって、アプリ全体を変更することなく、特定の機能に集中するために使用できます。
• プロトタイピングに最適です。 外部スタイル シートに書式を組み込む前に、インライン スタイルを使用して機能をテストできます。

インライン スタイリングの短所

• 退屈な場合があります。 すべてのタグを直接スタイリングするには時間がかかります。
• 限定。 セレクターやアニメーションなどの CSS 機能をインライン スタイルで使用することはできません。
• 多くのインライン スタイルにより、JSX コードが読み取れなくなります。

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

CSS を外部ファイルに記述して、React アプリにインポートできます。 このアプローチは、HTML ドキュメントの タグに CSS ファイルをインポートすることに相当します。

これを実現するには、アプリのディレクトリに CSS ファイルを作成し、それをターゲット コンポーネントにインポートして、アプリのスタイル ルールを記述する必要があります。

外部 CSS スタイルシートがどのように機能するかを示すために、CSS ファイルを作成して App.css という名前を付けることができます。 その後、次のようにエクスポートできます。

import { React } from "react";

import "./Components/App.css";

function App() {

  return (

    <div className="main">

    </div>

  );

}

export default App;

上記のコード スニペットは、外部スタイルシートを App.js コンポーネントにインポートします。 App.css ファイルは Components フォルダーにあります。

外部 CSS スタイルシートの長所

• 再利用可能。 React アプリのさまざまなコンポーネントで同じ CSS ルールを使用できます。
• コードをより見やすくします。 外部スタイルシートを使用すると、コードを簡単に理解できます。
• 高度な CSS 機能へのアクセスを提供します。 外部スタイル シートを使用する場合は、疑似クラスと高度なセレクターを使用できます。

外部CSSスタイルシートの詐欺

• スタイルが上書きされないようにするために、信頼できる命名規則が必要です。

CSS モジュールを使用する

React アプリは非常に大きくなる可能性があります。 CSS アニメーション名とクラス名は、デフォルトでグローバルにスコープされます。 1 つのスタイルが別のスタイルをオーバーライドする可能性があるため、大きなスタイル シートを扱う場合、この設定は問題になる可能性があります。

CSS モジュールは、アニメーションとクラス名をローカルにスコープすることで、この課題を解決します。 このアプローチにより、クラス名が必要なファイル/コンポーネント内でのみ使用できるようになります。 各クラス名には一意のプログラム名が付けられ、競合が回避されます。

CSS モジュールを実装するには、.module.css でファイルを作成します。 スタイルシートに style という名前を付ける場合、ファイル名は style.module.css になります。

作成したファイルを React コンポーネントにインポートすると、開始する準備が整います。

CSS ファイルは次のようになります。

/* styles.module.css */

.font {

  color: #f00;

  font-size: 30px;

}

次のように、App.js に CSS モジュールをインポートできます。

import { React } from "react";

import styles from "./styles.module.css";

function App() {

  return (

    <h1 className={styles.heading}>Hello etechjp.com reader</h1>

  );

}

export default App;

CSS モジュールを使用する利点

• SCSSおよびCSSと簡単に統合
• クラス名の競合を回避

CSS モジュールを使用することの短所

• CSS モジュールを使用してクラス名を参照すると、初心者は混乱する可能性があります。

スタイル付きコンポーネントを使用する

スタイル付きコンポーネントを使用すると、開発者は JavaScript コードで CSS を使用してコンポーネントを作成できます。 スタイル付きコンポーネントは、スタイルが付属する React コンポーネントとして機能します。 スタイル付きコンポーネントは、動的なスタイルと一意のクラス名を提供します。

スタイル付きコンポーネントの使用を開始するには、次のコマンドを使用してルート フォルダーにパッケージをインストールします。

npm install styled-components

次のステップは、スタイル付きコンポーネントを React アプリにインポートすることです

以下は、スタイル付きコンポーネントを使用する App.js のコード スニペットです。

import { React } from "react";
import styled from "styled-components";

function App() {

  const Wrapper = styled.div`

    width: 80%;

    height: 120px;

    background-color: lightblue;

    display: block;

  `;

  return <Wrapper />;

}

export default App;

レンダリングされたアプリには、スタイル付きコンポーネントからインポートされた上記のスタイルが含まれます。

スタイル付きコンポーネントの長所

• それは予測可能です。 このスタイリング アプローチのスタイルは、個々のコンポーネントにネストされます。
• クラスの命名規則に集中する必要はありません。 スタイルを記述するだけで、あとはパッケージが処理します。
• スタイル付きコンポーネントを小道具としてエクスポートできます。 スタイル付きコンポーネントは、通常の CSS を React コンポーネントに変換します。 したがって、このコードを再利用したり、小道具を使用してスタイルを拡張したり、エクスポートしたりできます。

スタイル付きコンポーネントの短所

• 開始するには、サードパーティのライブラリをインストールする必要があります。

構文的に優れたスタイル シート (SASS/ SCSS)

SASS には、通常の CSS にはない、より強力なツールと機能が付属しています。 これらの拡張によって導かれる 2 つの異なるスタイルでスタイルを書くことができます。 .scss と .sass。

SASS の構文は、通常の CSS の構文と似ています。 ただし、SASS でスタイル ルールを記述する場合は、開き括弧と閉じ括弧は必要ありません。

SASS の簡単なスニペットは次のように表示されます。

nav

  ul

    margin-right: 20px

    padding: 0

    list-style: list

  li

    display: block

  a

    display: block

    padding: 6px 12px

    text-decoration: underline

nav

React アプリで SASS の使用を開始するには、まず SASS をプレーンな CSS にコンパイルする必要があります。 Create React App コマンドを使用してアプリを設定したら、node-sass をインストールしてコンパイルを処理できます。

npm install node-sass

その後、ファイルを作成して、.scss または .sass 拡張子を付けることができます。 その後、通常の方法でファイルをインポートできます。 例えば;

import "./Components/App.sass";

SASS/SCSS の長所

• ミックスイン、ネスト、拡張など、多くの動的機能が付属しています。
• SASS/SCSS を使用する場合、CSS コードを記述する定型文は多くありません。

SASS/SCSS の短所

• スタイルはグローバルであるため、オーバーライドの問題に遭遇する可能性があります。

最適なスタイリング方法はどれですか?

5 つのアプローチについて説明したので、どれが最適かを知りたいと思います。 この議論で完全な勝者を強調するのは難しい. ただし、これらの考慮事項は、十分な情報に基づいた決定を下すのに役立ちます。

• パフォーマンス指標
• デザインシステムが必要かどうか
• コードの最適化の容易さ

インライン スタイルは、数行のコードしかないシンプルなアプリの場合に適しています。 ただし、他のすべて。 外部、SASS、スタイル付きコンポーネント、および CSS モジュールは、大きなアプリに適しています。

大規模な React アプリケーションで CSS を維持するためのベスト プラクティスは何ですか?

• インライン スタイリングは避けてください。 大規模な React アプリのすべてのタグにインライン CSS スタイルを記述するのは面倒です。 代わりに、ニーズに合った外部スタイル シートを使用してください。
• コードをリントします。 Stylelint などのリンターは、コード内のスタイル エラーを強調表示して、早期に修正できるようにします。
• 定期的なコード レビューを行います。 CSS を書くのは楽しいように思えますが、定期的なコード レビューにより、バグを早期に特定することが容易になります。
• CSS ファイルのテストを自動化します。 Enzyme と Jest は、CSS コードのテストを自動化するために使用できる素晴らしいツールです。
• コードを DRY に保ちます。 色や余白などの一般的に使用されるスタイルを扱う場合は、Don’t Repeat Yourself (DRY) の原則に従って、ユーティリティ変数とクラスを使用します。
• Block Element Modifier などの命名規則を使用します。 このようなアプローチにより、理解しやすく再利用しやすい CSS クラスを簡単に作成できます。

結論

上記は、React のスタイル設定に使用できる方法の一部です。 スタイリング アプローチの選択は、ニーズ、スキル、および好みによって異なります。 React アプリで、インライン スタイル シートや外部スタイル シートなど、いくつかのスタイリング アプローチを組み合わせることもできます。

また、フロントエンド開発者向けの最高の CSS フレームワークとライブラリを探索することもできます。