はじめに
Next.js app routerのチュートリアルの第２章のアウトプットします。
第２章 CSSスタイル
この章では下記を学習しました。
- グローバルＣＳＳをインポートする
TailwindCSSモジュール-
clsxでクラス名を柔軟に変更する
グローバルCSSのインポート
グローバルCSSファイルはアプリケーション全体で使用できる必要がある。
その場合はlayout.tsxでインポートする。
layout.tsxはapp routerにおけるルートレイアウトと呼ばれるファイルみたいです。
ここに書いたコードはすべてのページで共有されるため、headerやfooterといったものはおそらくここに書くのでしょう。
Tailwind
Next.jsはcreate-next-appで新しいプロジェクトを作成した場合にTailwindを使うか尋ねられます。
その時にYesを選択しておけば、すぐにTailwindが使える状態になっています。
CSSモジュール
一意のクラス名を自動的に作成することで CSS のスコープをコンポーネントに設定できるため、スタイルの衝突についても心配する必要がなくなります。
だそうです。
私は、Tailwindが結構好きですし、この後のコースもTailwindでスタイリングをするみたいなので適当に読み飛ばしました。
clsxでクラス名を柔軟に変更する
条件に基づいて要素のスタイルを設定するしたいという場合があります。
その時に使えるライブラリがclsxです。
例えば以下のコードでは、statusでredorblueを受け取ります。
そして、divのclassNameの中で条件式を書くことができます。
import clsx from 'clsx';
type Status = 'red' | 'blue';
type Props {
status: Status;
}
export default function Test({ status }: Props) {
return (
<div
className={clsx({
'bg-red-100': status === 'red',
'bg-blue-100': status === 'blue',
})}
>
test
</div>
);
}
statusがredの場合
app/page.tsx
<Test status="red" />
statusがblueの場合
app/page.tsx
<Test status="blue" />
おわりに
まだまだ楽勝ですね！
次の記事