CSS Module(SCSS) + clsx 조합 사용법

0. 라이브러리 설치하기

npm i 

클래스네임 3가지 패턴에 맞게 선택해 사용합니다.

✅ 1. 기본 클래스 적용 (클래스 1개일 때)

단순히 CSS 모듈에서 하나의 클래스만 사용할 때는 clsx 필요 없음.

<div className={styles.wrapper}></div>

✅ 2. 기본 클래스 + 조건부 클래스 섞어서 쓰기

className={clsx(
  styles.input,            // 기본 클래스
  { [styles.error]: error } // 조건부 클래스
)}

ㄴ 조건(error)이 true일 때만 styles.error가 적용되는 방식임.

✅ 3. 불리언 조건부 클래스

특정 상태일 때만 클래스 추가하고 싶을 때

clsx({
  [styles.active]: isActive,
  [styles.disabled]: isDisabled,
})

✅ 4. 동적 키(객체 형태) 일 때

CSS Module에서는 styles[variant]처럼 동적으로 접근해야 하는 경우 존재

clsx(
  styles.button,
  styles[size],      // ex: "small", "large"
  styles[variant],   // ex: "primary", "secondary"
)