2022-08-12

概要

Next.js では何も設定せずにコンポーネントレベルでCSSを使用できる CSS Modules が使用できます。つまり、コンポーネント間でのクラス名の重複など気にしないことができます。Tailwind CSS が気に入らない場合は、候補になりうると思います。使い方は簡単です。

ルール

1. xxx.module.css というファイル名を使用する。例：Button.module.css
2. 次のように利用する。

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

export function Button() {
  return (
    <button
      type="button"
      className={styles.button}　← ★Button.module.css に .button { ... } があること。

ただし、次のように複数のクラス名やハイフン付きを指定できません。

className={ styles.button styles.button-darkmode }

解決方法

classnames を使用します。

$ npm i classnames

又は

$ yarn add classnames

又は

$ pnpm i classnames

次のようにします。少し変な書き方ですが、ハイフンの問題も解決します。

:

import cx from 'classnames';

:

<Container
  className={cx(styles.container, 
    styles['mobile-layout'])}