React

【Next.js】classNameに複数のクラスや条件文を記述する方法

  /

Hello World🌍

classNameに複数クラスの指定、または複数の条件文を入れてクラスの値を出し分ける方法をご紹介します。

結論

ブラケット構文で実現できます。

CSS Modulesを使用して複数クラスを指定した例

<div className={`${styles.left} ${styles.page}`}>テキスト</div>

複数の条件文でクラスの値を出し分けている例

{steps.map((step, index) => (
  <li
    key={index}
    className={`
      ${router.pathname === step.url ? 'active' : ''} ${completedFlag ? 'isCompleted' : ''}
    `}>
    {step.title}
    </li>
))}

おわりに

しかしReact周りはmapや三項演算子を使う機会が本当に多いですね！

ではまた✋

関連記事