Emotion の導入
ページによって柔軟にスタイルを変えたい場合は、CSS フレームワークではなく、CSS-in-JS ライブラリを使うと便利です。例として、Emotion を導入する手順を説明します。
Emotion は、React コンポーネント内にスタイルを記述することができる CSS-in-JS ライブラリの 1 つです。Emotion を使用すると、JavaScript の変数を使ってスタイルを定義することができ、スタイルの再利用や組み合わせが容易になります。
Next.js が Emotion をサポートしたので Emotion で環境構築をします。
npm install @emotion/react @emotion/styled上記コマンドでパッケージを追加します。
Emotion の特徴は、以下の通りです。
- JavaScript の変数を使ってスタイルを定義できる
- スタイルの再利用や組み合わせが容易になる
- SCSS のように変数・ネスト・ミックスインを使える
- 三項演算子や関数などを使ってスタイルを動的に変更できる
- グローバルスタイルやメディアクエリなどを簡単に実装できる
- サーバーサイドレンダリングに対応している
次のコードは、SCSS では実現し難い Button コンポーネントのサンプルです。Emotion のメリットがよくわかるのではないかと思います。
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'
import { FC, useState } from 'react'
const Button: FC = () => {
const [isClicked, setIsClicked] = useState(false)
const buttonStyles = css`
background-color: ${isClicked ? '#333' : '#ccc'};
color: ${isClicked ? '#fff' : '#333'};
padding: 1rem 2rem;
border: none;
border-radius: 5px;
font-size: 1.5rem;
cursor: pointer;
&:hover {
background-color: ${isClicked ? '#333' : '#bbb'};
}
${(props) =>
props.isRound &&
css`
border-radius: 50px;
`};
@media (max-width: 600px) {
font-size: 1rem;
}
`
const handleClick = () => {
setIsClicked(!isClicked)
}
return (
<button css={buttonStyles} onClick={handleClick}>
{isClicked ? 'Clicked!' : 'Click me!'}
</button>
)
}
export default Button
このコードでは、useState フックを使用して、ボタンがクリックされたかどうかをトラッキングしています。ボタンスタイルは、CSS-in-JS ライブラリの Emotion を使用して作成されており、三項演算子を使用してクリックされた場合とされていない場合でスタイルを変更します。
また、ミックスインを使用して、丸いボタンの場合は別のスタイルを適用するようにしています。関数 handleClick は、ボタンがクリックされたときに isClicked の状態を反転させます。最後に、メディアクエリを使用して、画面サイズが 600px 以下の場合はフォントサイズを変更します。