💅
Next.js + Emotionでファイルを分割してスタイリングする
Next.jsの環境でEmotionのcss関数でスタイリングを行う際に少し手間取ったのでその忘備録。
設定する
emotionを追加
yarn add @emotion/react
tsconfig.jsonにjsxImportSourceパラメーターを追加する。
※ これが設定できていないとcss属性をpropできないので詰む。
{
"compilerOptions": {
"jsxImportSource": "@emotion/react"
}
}
babelプラグインを追加
yarn add -D @emotion/babel-plugin
.babelrcを作成して下記内容を記載する。
{
"presets": [
[
"next/babel",
{
"preset-react": {
"runtime": "automatic",
"importSource": "@emotion/react"
}
}
]
],
"plugins": ["@emotion/babel-plugin"]
}
最低限以上の設定をしておけばcss関数を用いてスタイリングが可能になる。
スタイリング例
Emotionには、さまざまなスタイリング方法があるが、(styled関数や、jsxなど)今の所私は、断然css推しです。
理由としては大きく二つあります。
- 別のファイルに分離しやすい
- css Modulesらしく記法できる
下記にスタイリングの一例を記載します。
// src/sryles/pages/index.styles.ts
import { css } from '@emotion/react'
export const container = css`
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
`
// src/pages/index.tsx
import type { NextPage } from 'next'
import * as styles from '../styles/pages/index.styles'
const Home: NextPage = () => {
return (
<div css={styles.container}></div>
)
}
余談ですが、vscodeを利用している場合、vscode-styled-componentsをインストールしておくと、色付けされて見やすくなります。
Discussion