[Next.js] CSS Modulesで複数のクラスを指定する方法

Next.jsのCSS Modulesで複数のクラスを指定する方法について説明します。

ソースコード

以下のように書きます。{の次の記号はバッククォートです。

import styles from "./styles.module.css"
// ...
return (
    <div className={`${styles["my-class"]} ${styles["my-class-2"]}`}>Hello</div>
)

clsxを使用する場合

ライブラリclsxを使用すると、以下のようになります。

import styles from "./styles.module.css"
import clsx from "clsx"
// ...
return (
    <div className={clsx(styles["my-class"], styles["my-class-2"])}>Hello</div>
)