[小ネタ]Next.jsのコンポーネントレベルCSSでハイフン付きのクラス名を利用する方法

ブラケット（角括弧）とシングルクォーテーションで括ってあげましょう。

Next.js 初心者向け小ネタ

大高大輔

2021.12.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは！DA(データアナリティクス)事業本部サービスソリューション部の大高です。

Next.jsのコンポーネントレベルCSSで、ハイフン付きのクラス名を利用する際に少し悩んだので記載しておきたいと思います。

コンポーネントレベルCSSでのクラス名指定

コンポーネントレベルCSSでクラス名を指定したい場合には、下記のドキュメントにあるようにスタイルをimportして利用します。

			
			
.error {
  color: white;
  background-color: red;
}

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

export function Button() {
  return (
    <button
      type="button"
      className={styles.error}
    >
      Destroy
    </button>
  )
}

ハイフンを含むクラス名の場合はどうするの？

このとき、error-btnのような、ハイフンを含むクラス名だった場合にはどうしたらよいかです。

			
			
.error-btn {
  color: white;
  background-color: red;
}

以下のようにそのまま指定すると、エラーになります。

この場合には、ブラケット（角括弧）とシングルクォーテーションで括ってあげればOKです！

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

export function Button() {
  return (
    <button
      type="button"
      className={styles['error-btn']}
    >
      Destroy
    </button>
  )
}