CSS ModulesのClass付与 #CSS

はじめに

久しぶりの投稿です
Nextでcss modulesを使用しています
classの付与の仕方で注意する点がいくつかあったのでまとめました

active

active時に色を変更するにはglobalを使用する

.title {
  color: "#333";
  &:global(.active) {
    color: "#666"
  }
}

状況別Classの付け方

// 一単語
<div className={styled.name}></div>

// アンダーバー
<div className={styled.class__name}></div>

// キャメルケース
<div className={styled.classNameHoge}></div>

// ハイフンが含まれる場合
<div className={styled['class-name']}></div>

// 複数のclass名
<div className={`${styles.name} ${styles.class__name}`}></div>

// 複数 && ハイフンが一部
<div className={`${styles.name} ${styles['class--name']}`}></div>

// 動的にclassをだし分ける
const [state, setState] = useState(true)

<p className={`${state && "active"}`} ></p>
<p className={state ? "active" : ""} ></p>

おわり

細かい違いですが、知らないとちょっとだけつまずきます