外部CSSによるコンポーネントのスタイリング

インラインスタイルは小規模または動的なスタイリングに便利ですが、ほとんどの実際のアプリケーションでは外部CSSファイルが利用されます。この方法により、スタイルがコンポーネントのロジックから分離され、プロジェクトの拡大に伴って管理しやすくなります。

Reactは外部CSSを標準でサポートしています。従来のWeb開発と同様に、通常のCSSを記述し、クラス名を使ってコンポーネントに適用できます。

外部CSSファイルの作成

まず、CSSファイルを作成し、スタイルを定義します:

/* styles.css */
.title {
  font-size: 32px;
  font-weight: 700;
  color: rebeccapurple;
}

このCSSファイルには、複数のコンポーネントで再利用できるシンプルなクラスが含まれています。

CSSのコンポーネントへのインポート

スタイルを使用するには、CSSファイルをコンポーネントファイルにインポートします:

import "./styles.css";

const App = () => (
  <>
    <h1 className="title">App title</h1>
  </>
);

Reactでは、class属性はJavaScriptの予約語であるため、classNameとして記述します。

Reactにおける外部CSSの仕組み

CSSファイルはデフォルトでグローバルに適用されます。インポートしたCSSファイルで定義されたクラスは、どのコンポーネントでも使用可能です。スタイルの挙動は標準のHTMLやCSSと同様です。これにより、従来のWeb開発経験を持つ開発者にとって、外部CSSは親しみやすく、使いやすいものとなっています。

外部CSSを使用するタイミング

以下の場合、外部CSSの利用が適しています。

• 複数のコンポーネントでスタイルを共有する場合
• レイアウトが複雑になる場合
• 構造とスタイリングを明確に分離したい場合

大規模なプロジェクトでは、外部CSSを使用することでコードが整理され、保守性が向上します。