ReactでCSSを使う方法

ReactでCSSを使う方法は色々とあるため、インストール方法や使い方を自分用に整理しました。

なお、Create React Appで作成したプロジェクトにSassを使う場合、以下のコマンドで事前にインストールしないと「Cannot find module 'sass'」というエラーが出ます。

npm install -D sass

Sassにはいくつか種類があり、これまで主流だったLibSass（node-sass）は非推奨になり、現在はDart Sassが推奨されています。上記のコマンドは、Dart Sassがインストールされます。

Inline Styles

HTMLのタグごとにstyle属性で直接CSSを定義する方法です。Reactのインラインスタイルは、以下のようにJavaScriptのオブジェクトで指定します。

<div style={{ color: "red", marginBottom: "2em" }}>Inline Styles</div>

プロパティは「marginBottom」のようにキャメルケース（一番最初を小文字、他は要素の先頭を大文字）で記述します。

もちろん、オブジェクトを変数に入れることもできます。

const titleStyle = {
	color: "blue",
	fontSize: "1.8em",
};

<div style={titleStyle}>Inline Styles</div>

「fontSize: 1.8」のように数値を指定した場合は、自動的に「px」がつきます。px以外の単位をつける場合は「fontSize: "1.8em"」のように文字列で指定します。

CSS Modules

CSSを定義したモジュールをインポートして使う手法です。

まずは「〇〇.module.css（.scss）」というファイルを作り、CSSを記述します。

.box {
	background-color: red;

	h2 {
		color: blue;
	}
}

そして、以下のようにインポートして使います。「classes」の部分は別名でも構いません。

import classes from "./Box.module.scss";

<div className={classes.box}>
	<h2>CSS Modules</h2>
</div>

CSS Modulesは、webpackのcss-loaderを使用してクラス名のスコープをローカルに限定します。

HTMLのソースを確認すると分かりますが、クラス名の部分には特殊な文字列が付与されており、これによって別のファイルでクラス名が衝突することを防げます。

Styled JSX

Styled JSXは、ReactのJSXファイル（またはTypeScriptのTSXファイル）にCSSを書けるライブラリです。JavaScriptのファイルにCSSを記述する「CSS-in-JS」という手法の一つです。

まずは、以下のコマンドでStyled JSXをインストールします。

npm install -D styled-jsx

次に、Babelの構成ファイルにプラグインを記述します。

{
  "plugins": [
    "styled-jsx/babel"
  ]
}

使い方は、「jsx」の属性をつけたstyleタグを書き、その中にCSSを定義します。

<div className="box">
	<h2>Styled JSX</h2>
</div>
<style jsx>{`
	.box {
		background-color: red;
	}
`}</style>

特殊な文字列のクラスが付与されるため、他のコンポーネントで同名のクラスを定義した場合でも、デザインの上書きを避けられます。

なお、TypeScriptを使っている場合、「Property 'jsx' does not exist」というエラーが出てコンパイルが失敗する可能性があります。

その場合は、「custom.d.ts」といったTypeScriptの型定義ファイルを作成するとエラーが消えました。

// eslint-disable-next-line react/no-typos
import "react";

declare module "react" {
	interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
		jsx?: boolean;
		global?: boolean;
	}
}

まだ理解不足ですが、Create React AppなどBabelの構成ファイルを修正できない場合、babel-plugin-macrosを使用する必要があるようです。Create React Appの場合、babel-plugin-macrosが標準でインストールされているため、いきなりインポートできます。

正しいやり方か不明ですが、以下のようなプログラムでCSSが反映されているようでした。

import css from "styled-jsx/macro";

const { className, styles } = css.resolve`
	.box {
		background-color: red;
	}

	h2 {
		color: blue;
	}
`;

export const StyledJSX = () => {
	return (
		<>
			<div className={`${className} box`}>
				<h2 className={className}>Styled JSX</h2>
			</div>
			{styles}
		</>
	);
};

出力されるHTMLは、以下のようなイメージです。

<div class="jsx-131313906 box">
	<h2 class="jsx-131313906">Styled JSX</h2>
</div>

Styled Components

Styled Componentsは、スタイルがあてられたコンポーネントを作成するCSS-in-JSのライブラリです。

まずは、以下のコマンドでStyled Componentsをインストールします。

npm install -D styled-components
npm install -D @types/styled-components

使い方は、まずはstyled-componentsをインポートします。そして、CSSを定義した定数を作成してHTMLタグを置換します。

import styled from "styled-components";

export const StyledComponents = () => {
	return (
		<Box>
			<h2>Styled Components</h2>
		</Box>
	);
};

const Box = styled.div`
	background-color: red;

	h2 {
		color: blue;
	}
`;

Styled ComponentsはデフォルトでSassが使えます。 また、特殊な文字列のクラス名に変換されるため、クラス名の衝突を気にしなくて済みます。

Emotion

まずは、以下のコマンドでEmotionをインストールします。

npm install -D @emotion/react

Emotionはインポートして使います。Create React Appの場合には、一番上のコメントがないとエラーになります。

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

export const Emotion = () => {
	const box = css`
		background-color: red;

		h2 {
			color: blue;
		}
	`;

	return (
		<div css={box}>
			<h2>Emotion</h2>
		</div>
	);
};

定数にスタイルを書くところはStyled Componentsと似ていますが、HTMLタグを置換するのではなく、属性として指定します。

ちなみに、「@emotion/styled」を使えばStyled Componentsと同じような記述も可能です。

npm install -D @emotion/styled

import styled from "@emotion/styled";

export const Emotion = () => {
	return (
		<Box>
			<h2>Emotion</h2>
		</Box>
	);
};

const Box = styled.div`
	background-color: green;

	h2 {
		color: blue;
	}
`;

Tailwind CSS

Tailwind CSSは、あらかじめ用意されたユーティリティクラスを組み合わせてデザインを行う手法です。

使い方は、以下のようなイメージです。

<div className="bg-red-600">
	<h2 className="text-blue-700">Tailwind CSS</h2>
</div>

背景色を赤くする「bg-red-600」と、文字を青くする「text-blue-700」は、Tailwind CSSに用意されているユーティリティクラスです。他にも様々なユーティリティクラスが用意されており、それらを組み合わせて使います。

Tailwind CSSのインストール方法などは以下の記事をお読みください。

あわせて読みたい

Tailwind CSSのインストールおよび初期設定の方法 この記事では、Tailwind CSSとは何か、またインストールや初期設定の方法などを紹介します。 注意点 間違っている可能性もあるので自己責任で参考にしてください。 【Ta...