[React] CSS Module을 이용한 컴포넌트 스타일링

[React] 

안녕하세요, 피터팬입니다!

이전 시간에 했던 컴포넌트 스타일링을, Styled-component가 아닌, CSS Module을 사용하여 적용해볼 건데요 !

 

Styled-component는 Component(JS파일) 내부에 적용하였다면, CSS Module은 CSS파일을 JS파일로부터 분리하여 작성합니다. 그래서, CSS파일과 JS파일을 분리하고싶다 싶은 분에게는 CSS Module이 더 적합합니다.

그리고, CSS Module은 별도의 Module을 설치하지 않아도, CRA(Create-React-App)에 설치되어 있습니다.

 

다운로드

X ; CRA(Create-React-App)에 설치되어 있습니다.

 

적용법

css파일이 아닌, module.css(작성은 css와 동일)에서 styles를 import해줍니다.

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

 

사용법

className={styles.(class명)}

# Box.module.css

.box {
  background-color: red;
}

# Box.js

const Box = () => {
	return <div className={styles.box}></div>
}

 

class명에 --혹은 __가 들어 있다면, 아래와 같이 적용해야합니다 .

#Box.js

const Box = () => {
	return <div className={styles['box--primary']}></div>
}

 

 

아래와 같이 Box라는 이름의 파일의 box클래스 아래 랜덤 문자, Box_box__(랜덤 문자)의 class명이 주어집니다.

 

---

Reference

https://react.vlpt.us/styling/02-css-module.html

2. CSS Module · GitBook