🦾

Next.js (4): CSS Module / Styles JSX

2022/03/26に公開

CSS

概要

Next.jsで使えるCSSの書き方の中で二つ紹介します。

CSS Module

https://github.com/css-modules/css-modules

コンポーネントレベルでCSSを追加可能です。
[name].module.cssという名前でファイルを作成します。
特徴としてClass名の衝突を心配する必要はない点があります。
例えば以下の.activeや.linkが別のcssファイルと被るかを考慮してクラス名をつけなくてもいいという意味です。

NavBar.module.css

.active {
  color: crimson;
}
.link {
  text-decoration: none;
}

コンポーネント側ではcssファイルをstylesでimportしてObjectのように設定を追加できます。

NavBar.js

import Link from "next/link";
import styles from "./NavBar.module.css";

export default function NavBar() {
  return (
    <nav>
      <div>
        <Link href="/">
          <a className={`${styles.link}`}>HOME</a>
        </Link>
      </div>
    </nav>
  );
}

またレンダリングされた結果を見るとclass名が勝手につけられていることが確認できます。
これにより、クラス名の重複がされなくなります。

Styles JSX

https://github.com/vercel/styled-jsx

CSS Moduleと同じく他ファイルのクラス名と独立しています。
CSS Moduleと違ってimportが不要です。<style jsx> </style>で囲んだ形でコンポーネントに直接書くことができます。

NavBar.js

import Link from "next/link";

export default function NavBar() {
  return (
    <nav>
      <div>
        <Link href="/">
          <a>HOME</a>
        </Link>
      </div>
      <style jsx>
        {`
          a {
            text-decoration: none;
          }
        `}
      </style>
    </nav>
  );
}

レンダリングされたHTMLの要素を見ると、CSS ModuleのようにClass名が書き変わっています。
GlobalなCSSを定義したい場合は globalをつけます

    <style jsx global>{`
    p {
      margin: 0;
    }
    `}</style>

VScodeではデフォルトではCSSの色付けがされないので、拡張機能のstyled-jsxを入れることをお勧めします。

概要

CSS Module

Styles JSX

Discussion