[TIL][24.01.29] React, className 복수 classname 적용(clsx 라이브러리 사용)

css module에선 className이 2개 이상이 되거나, 조건부를 주기 위해서 복잡하거나 힘든 경우가 있다.

 

clsx 라이브러리로 해결 가능

 

설치

npm install --save clsx
yar add clsx

 

사용 방법

복수 className

clsx를 사용하면 복수 클래스를 기존 html에 주듯이 쉽게 줄 수 있다.

<div className={clsx(styles.button, styles.addButton)}>

<div className={clsx(styles['input-wrap'], styles['bottom'])}> // -가 들어간 클래스는 해당형태로 표현할 수 있다.

 

조건 부 className

조건부로 className을 줘야할때 적용하는 법이다.

방법은 간단하다. 괄호 안에 스타일명을 주고, 조건을 넣어주면 된다

<div className={clsx(styles.li, { // .li는 기본 class
    [styles.active]: item.id === menuItem.id,
    [styles.recommended]: item.recommended,
  })}></div>