CSS Modules 클래스명 넣는 법

Today I learned 카테고리에 있긴 하지만 Today에 배운건 아니고... Next.js 관련 튜토리얼보다가 예전에 고민하고 찾아봤던 부분이 생각나서 얼른 글로 남겨본다. 

지난 사이드 프로젝트 때 CSS Modules를 사용했는데 클래스 명을 여러 개 넣는 것과 관련하여 찾아본 적이 있었다. (기존에 작성했던 코드에서 보고 올리는 것이기 때문에 더 정확한 방법에 대해서는 문서를 찾아보거나 추가적으로 검색해보는 것을 권해드립니다. )

1. 클래스 명이 하나 일 때 

- style.className 방식

<h2 className={cardStyles.cardTitle}>

- style['class-name'] 방식

<h2 className={cardStyles['card-title']}>

 

2. 클래스 명이 두개 이상일 때

- {`${style.className1} ${style.className2}`}  /  {`${style['class-name1']} ${style['class-name2']}`}

// style.className 방식
<span className={`${cardStyles.cardCategory} ${cardStyles.cardTag}`}>

// style['class-name'] 방식
<span className={`${cardStyles["card-category"]} ${cardStyles["card-tag"]}`}>

// 조건문도 넣을 수 있음
<span className={`${cardStyles.cardCategory} ${isClicked ? cardStyles.selected : ''}`}>

// 배열에 넣고 join 하기
<span className={[cardStyles.cardCategory, isClicked ? cardStyles.selected : ''].join('')}>

 

3. globals.css와 CSS Modules를 함께 사용할 때

- ``(백틱) 안에 텍스트로 넣기

<div className={`body-text ${alertStyles.alert}`}>

- 변수로 넣기

const btnClass = `${btnStyles.btn} mt-16 ml-8`
// 코드 생략
<button className={`${btnClass} ${btnStyles['btn-default']}`}>