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

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

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

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

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

components/Button.module.css

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

components/Button.tsx

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

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

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

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

components/Button.module.css

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

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

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

components/Button.tsx

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

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

まとめ

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

そもそもクラス名としてハイフンを付けないべきという話もあったりしますが、スタイルシートの利用側の立場として困った際には上記で解決できます。

どなたかのお役に立てば幸いです。それでは！