概要
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
設定を追加します。
"compilerOptions": {
"jsxImportSource": "@emotion/react"
}
craco.config.js
ルート直下にcraco.config.jsを作成して、以下を記述します。
module.exports = {
babel: {
presets: [
[
"@babel/preset-react",
{ runtime: "automatic", importSource: "@emotion/react" },
],
],
plugins: ["@emotion/babel-plugin"],
},
};
package.json
内容を修正します。
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}
動作確認
cssプロパティが使用できて、デバッグ(npm start
)したときと、ビルド(npm run build
→ serve -s build
)したときにスタイルが反映されていればOKです。
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
設定を追加します。
"compilerOptions": {
"jsxImportSource": "@emotion/react"
}
.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を使う場合、さらに追加で設定が必要になるようです。
ここでは取り上げませんが、設定方法を知りたい方は、以下の記事を参考にしてください。