CSS Modules

シーエスエスモジュール

CSS Modules を分かりやすく

CSS Modules は、CSS ファイル内のスタイルをクラス名に紐付ける手法です。これにより、スタイルの名前衝突を回避することができます。 CSS をコンポーネントごとに分割し、それぞれにユニークな名前をつけることで、スタイルの競合や名前空間の汚染を回避するための仕組みです。

Next.js では、CSS Modules をサポートしており、コンポーネントごとに独立したスコープをもたせることができます。 CSS Modules は、規約に従ったファイル名をつけることで有効化できます。

例えば、以下のような CSS ファイルを考えます。

/* styles.module.css */

.button {
  background-color: blue;
  color: white;
}

.button:hover {
  background-color: lightblue;
}

この CSS ファイルを使用する場合、次のように記述します。

import styles from './styles.module.css'

function Button() {
  return <button className={styles.button}>Click me!</button>
}

このように、CSS ファイルをインポートし、スタイルをクラス名として利用することができます。

CSS Modules のメリット

CSS Modules を使用することによって、以下のようなメリットがあります。

スタイルの名前衝突を回避できる
クラス名が一意になるため、再利用性が高くなる
スタイルの変更に強い

また、Next.js では、CSS Modules をサポートしており、.module.cssという拡張子を使用することで、自動的に CSS Modules として扱われます。

import styles from './styles.module.css'

function MyComponent() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello World!</h1>
      <p className={styles.text}>Lorem ipsum dolor sit amet.</p>
    </div>
  )
}

CSS Modules の記述方法は、通常の CSS と同じであり、.module.cssを使うことで CSS Modules として扱われます。そして、インポートしたクラス名をclassNameに指定することで、スタイルを適用することができます。

CSS Modules を使ってみる

以下は、Next.js で CSS Modules を使うための簡単な例です。

// components/Button.tsx

import styles from './Button.module.css'

interface ButtonProps {
  children: React.ReactNode;
}

export default function Button({ children }: ButtonProps) {
  return <button className={styles.button}>{children}</button>
}

/* components/Button.module.css */

.button {
  color: white;
  background-color: blue;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
}

上記の例では、Button コンポーネントでスタイルを定義するために、Button.module.css というファイルを作成しています。このファイルには、.button という CSS クラスが定義されています。このクラスは、Button コンポーネントの className 属性にセットされます。className 属性は、React で HTML 要素に CSS クラスを付与するために使用されます。

TypeScript との組み合わせ

CSS Modules を TypeScript と組み合わせる場合、スタイルがオブジェクトとしてエクスポートされるため、import styles from './styles.module.css' のようにインポートすると、TypeScript が styles 変数の型を自動的に解決することができます。

// components/Title.tsx

import styles from './Title.module.css'

interface TitleProps {
  children: React.ReactNode
}

export default function Title({ children }: TitleProps) {
  return <h1 className={styles.title}>{children}</h1>
}

Next.js を学ぶ一覧へ