리액트에서 css파일들은 컴포넌트 css여도 글로벌로 적용되게 된다. 이럴때 CSS 모듈을 사용하면 컴포넌트 내부에만 적용되는 CSS를 작성할 수 있다.

1. CSS 모듈 파일 생성하기

스타일을 적용할 컴포넌트를 위한 CSS 모듈 파일을 생성한다.
파일 이름은 컴포넌트명.module.css 형식으로 작성한다.
이 예시에서는 EventList 컴포넌트를 위한 CSS 모듈 파일을 생성할 것이기 때문에 이렇게 작성하였다.

EventList.module.css

2. CSS 작성하기

.card {
  ...
}

.card button {
  ...
}

3.CSS 모듈 파일을 컴포넌트에 가져오기

CSS 적용될 컴포넌트에 다음과 같이 CSS 모듈을 가져온다.

import styles from "./EventList.module.css";

4. 가져온 스타일 적용하기

{styles.className} 형식으로 스타일 객체를 사용한다.

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

참고로 밑의 코드에서 .card button으로 해준 이유는 css modules은 classname이나 id이름이 있을때만 적용되기 때문이다.

.card {
  border: 1px solid #eee;
  box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.05);
  padding: 10px;
  max-width: 400px;
  margin: 20px auto;
  border-radius: 4px;
}

.card button {
  background-color: #555;
}