NextのclassNameにハイフン付きのクラス名を設定する方法

NextのclassNameにハイフン付きのクラス名を設定する方法

Next.jsでハイフン付きのクラス名をclassNameに設定するには、通常の方法で問題なく指定できます。
TypeScriptを使用した例を以下に示します。

例: ハイフン付きクラス名の設定

import React from 'react';
import styles from './Home.module.scss'; // SCSSファイルをインポート

const Home: React.FC = () => {
  return (
    <div className={styles['my-class-name']}>
      ハイフン付きのクラス名が適用されています
    </div>
  );
};

export default Home;

注意点

• SCSSファイル（Home.module.scss）内で、クラス名 my-class-name を適切に定義してください。
• className={styles['my-class-name']} のように、クラス名にハイフンが含まれている場合はブラケット記法を使用します。

もしクラス名をCSSモジュールで指定しない場合や、グローバルCSSを使用する場合も、基本的にはクラス名にハイフンを含めることに問題はありません。