ReactのCSSスタイリング5選を整理してみた【Inline Styles / CSS Modules / Styled JSX / styled-components / Emotion】

1. はじめに

今回はReactでスタイルを適用する方法を5つ学びました。
Reactにはスタイリングの手法がいくつかあり、それぞれ書き方や特徴が異なるみたいです。
この記事では各手法の基本的な書き方を整理します。

2. Inline Styles

Reactでは、HTMLのstyle属性と似た書き方でスタイルを直接指定できます。
ただし書き方はHTMLとは少し異なるみたいです。

Inline Stylesの基本的な書き方です。

function App() {
  // スタイルをオブジェクトで定義する
  const style = {
    color: "red",
    fontSize: "24px",
  };

  return <h1 style={style}>こんにちは</h1>;
}

CSSのプロパティ名は camelCase で書くみたいです。
たとえば font-size は fontSize、background-color は backgroundColor と書きます。

Inline Stylesはそのコンポーネントにしかスタイルが当たりません。
スタイルを使いまわしたい場合は他の手法の方が向いているようです。

3. CSS Modules

CSSファイルを使いつつ、スタイルのスコープをコンポーネント単位に限定できる手法です。
クラス名が自動的にユニークになるので、他のコンポーネントとクラス名が衝突しないみたいです。

ファイル名は App.module.css のように .module.css で終わらせます。

/* App.module.css */
.title {
  color: blue;
  font-size: 24px;
}

// CSS Modulesをインポートして使う
import styles from "./App.module.css";

function App() {
  return <h1 className={styles.title}>こんにちは</h1>;
}

クラスを当てるときは className={styles.クラス名} の形で指定するみたいです。
通常のHTMLの class 属性とは書き方が異なります。

4. Styled JSX

Styled JSXはNext.jsに標準で組み込まれているスタイリング手法です。
コンポーネントの中にCSSをそのまま書けるのが特徴みたいです。

function App() {
  return (
    <div>
      <h1>こんにちは</h1>

      {/* styleタグにjsxをつけてCSSを書く */}
      <style jsx>{`
        h1 {
          color: green;
          font-size: 24px;
        }
      `}</style>
    </div>
  );
}

Styled JSXはNext.jsプロジェクトであればそのまま使えます。
通常のReactプロジェクトで使う場合は別途インストールが必要なようです。

5. styled-components

styled-componentsは、スタイルを持ったコンポーネントを作れるライブラリです。
CSSをJavaScriptの中に書く手法で、CSS-in-JSと呼ばれるみたいです。

まずインストールします。

npm install styled-components

インストール後、以下のように使います。

// styled-componentsをインポートする
import styled from "styled-components";

// スタイル付きのコンポーネントを定義する
const Title = styled.h1`
  color: purple;
  font-size: 24px;
`;

function App() {
  // Titleコンポーネントとして使う
  return <Title>こんにちは</Title>;
}

styled.h1 の部分は、スタイルを当てたいHTML要素に合わせて変えます。
styled.p や styled.div のように書くみたいです。

6. Emotion

EmotionもCSS-in-JSのライブラリです。
styled-componentsと似た書き方ができますが、2種類の書き方があるみたいです。

まずインストールします。

npm install @emotion/react @emotion/styled

6-1. css propを使う書き方

css をインポートして、JSXの css propに渡す書き方です。

/** @jsxImportSource @emotion/react */
// cssをインポートする
import { css } from "@emotion/react";

// スタイルをcssで定義する
const titleStyle = css`
  color: orange;
  font-size: 24px;
`;

function App() {
  // css propにスタイルを渡す
  return <h1 css={titleStyle}>こんにちは</h1>;
}

ファイルの先頭に /** @jsxImportSource @emotion/react */ を書かないと動かないみたいです。
忘れやすいので注意が必要です。

6-2. styledを使う書き方

styled-componentsと同じような書き方でも使えます。

// emotion/styledをインポートする
import styled from "@emotion/styled";

// スタイル付きコンポーネントを定義する
const Title = styled.h1`
  color: orange;
  font-size: 24px;
`;

function App() {
  return <Title>こんにちは</Title>;
}

まとめ

今回はReactのスタイリング手法を5つ学びました。
それぞれ書き方が異なるので、どれを使うかはプロジェクトの状況によって変わるようです。

今回の気づき

Reactにはスタイルの当て方がいくつもあることを初めて知りました。
CSS Modulesはファイルをわけてもスコープをしぼれるので、既存のCSSの書き方に近い感覚で使えそうだと感じました。
styled-componentsやEmotionはコンポーネントとスタイルをまとめて管理できる点が便利そうみたいです。

ハマりやすいポイント

• Inline Stylesはプロパティ名を camelCase で書く必要がある
• CSS Modulesでクラスを当てるときは className={styles.クラス名} の形にする
• Emotionの css prop を使う場合はファイル先頭に /** @jsxImportSource @emotion/react */ が必要