Next.jsで複数のclassNameを1つの要素に対して適用する方法

本ページでは Next.js において1つのDOMに対して複数の className を適用する方法について記載します。

CSS Module を利用している場合の方法になります。

方法 #

幾つかの方法があります。

className を指定する際に template literal ( バックティックで囲むやつです) を利用することで複数のクラスを適用します。

<div className={`${styles.classOne} ${stuyles.classTwo}`}>
    Something
</div>

方法1 と同様のことを join() によって実現する方式です。 join() を利用するためにArrayの中に入れています。

<div className={[styles.classOne, stuyles.classTwo].join(' ')}>
    Something
</div>

Next.js では Component や Page を記述する際に CSS Module という機能を利用することができます。

この機能によって他のCSSファイルなどと衝突することなどを気にせずにCSSファイルを記述することが可能となります。

CSS Module は JavaScript のように import によって取り込み、通常のJavaScriptモジュールのように利用することが可能です。

例えば以下のCSSを styles.css として記述し、

classOne {
    color: red;
}
classTwo {
    background-color: blue;
}

これをJavaScript側のコードで import して利用します。

import styles from "./styles.css"

<div className={styles.classOne}>
    Something
</div>

Next.js のチュートリアルでも上記のように1つの要素に1つのクラスのみを適用していたので、上記の記述で足りていたのですが、所用で複数のクラスを適用する必要が出てきたため本ページの方法を調べました。

また、 CSS Module を利用している場合ハードコーディングでクラス名を指定しても動作しません。これはレンダリング時にユニークな名称になるようにクラス名が置き換えられているためのようです。

例えば、以下のように単純にクラス名を列挙しても想定したような動作をしません。

<div className="classOne classTwo">
    Something
</div>