CSS 모듈
- CSS 파일은 파일명.module.css 확장로 만들어야 한다.
- CSS 클래스명을 로컬 스코프로 만들어서 클래스명 충돌방지
- composes : css파일에서 composes로 상속받으면 단일 클래스만 써도 됨
CSS 모듈 사용법
/* Button.module.css */
.button {
background-color: blue;
color: white;
padding: 10px 20px;
}
.primary {
background-color: green;
}
import styles from './Button.module.css';
function Button() {
return (
<button className={styles.button}>클릭</button>
);
}
동작 원리
/* 작성한 코드 */
.button { color: blue; }
/* 실제 변환된 코드 */
.Button_button__2Rfj3 { color: blue; }
<button class="Button_button__2Rfj3">클릭</button>