【React・Next.js】emotion/react のセットアップ

概要

CRA（Create React App）で作成したReactプロジェクトと、Next.jsプロジェクトそれぞれに対して、emotion/reactの導入方法をまとめました。

どちらもゴールは、.tsxファイルに以下のプラグマを書かなくて済む設定にすることです。

/** @jsx jsx */
/** @jsxImportSource @emotion/react */

emotionは、CSS in JS記法で書くスタイリングパッケージです。

CRA（Create React App）への導入

以下の記事の抜粋になっています。
パッケージについて詳しく知りたい方は、こちらも併せて参照してください。

プロジェクト作成

適当なプロジェクトフォルダを作成して、以下を実行します。

npx create-react-app . --template typescript --use-npm

パッケージインストール

以下をインストールします。

npm i @emotion/react
npm i -D @emotion/babel-plugin
npm i @craco/craco

tsconfig.json

設定を追加します。

tsconfig.json

"compilerOptions": {
    "jsxImportSource": "@emotion/react"
}

craco.config.js

ルート直下にcraco.config.jsを作成して、以下を記述します。

craco.config.js

module.exports = {
  babel: {
    presets: [
      [
        "@babel/preset-react",
        { runtime: "automatic", importSource: "@emotion/react" },
      ],
    ],
    plugins: ["@emotion/babel-plugin"],
  },
};

package.json

内容を修正します。

package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
}

動作確認

cssプロパティが使用できて、デバッグ（npm start）したときと、ビルド（npm run build → serve -s build）したときにスタイルが反映されていればOKです。

App.tsx

import React, { VFC } from 'react';
import { css } from '@emotion/react';

export const App: VFC = () => {
    return (
        <div css={styles.container}>
            <div css={styles.text}>Hello</div>
        </div>
    )
}

const styles = {
    container: css`
        position: relative;
        width: 100vw;
        height: 100vh;
        background-color: #1e1e1e;
        display: flex;
        justify-content: center;
        align-items: center;
    `,
    text: css`
        font-size: 5rem;
        color: #fff;
    `
}

Next.js への導入

以下の記事の抜粋になっています。
パッケージについて詳しく知りたい方は、こちらも併せて参照してください。

プロジェクト作成

適当なプロジェクトフォルダを作成して、以下を実行します。

npx create-next-app . --ts --use-npm

パッケージインストール

以下をインストールします。

npm i @emotion/react
npm i -D @emotion/babel-plugin

tsconfig.json

設定を追加します。

tsconfig.json

"compilerOptions": {
    "jsxImportSource": "@emotion/react"
}

.babelrc

ルート直下に.babelrcを作成して、以下を記述します。

.babelrc

{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

動作確認

cssプロパティが使用できて、デバッグ（npm run dev）したときと、ビルド（npm run build → npm start）したときにスタイルが反映されていればOKです。

コードはCRAの場合と重複するので割愛します。

補足：nth-child を使う場合

nth-childを使う場合、さらに追加で設定が必要になるようです。
ここでは取り上げませんが、設定方法を知りたい方は、以下の記事を参考にしてください。