[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>
)