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