CSS Modules란?
- CSS를 사용할 때 클래스 이름을 고유한 값으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술
- 모듈화된 CSS를 번들러로 불러오면 다음과 같이 사용자가 정의했던 클래스네임과 고유한 클래스네임으로 이뤄진 객체가 반환됨
장점
- 클래스명이 충돌하는 단점을 극복할 수 있다.
- 컴포넌트 단위로 스타일을 적용할 때 유용하다.
- 유지보수가 편해진다.
단점
- CSS Modules 는 컴포넌트를 작성할 때 한곳에서 모든 것을 작성하지 않는다.
- 많은 CSS 파일을 따로 관리해야하는 문제점 발생
사용법
- [파일이름].module.css 으로 파일 명을 저장해야함
- module.css 파일을 import 해준다
styles 를 console.log 로 확인해보면 객체로 받아와진다.
또한 클래스 이름이 고유한 이름으로 자동으로 변경된 모습을 볼 수 있다.
즉 , button 이 key 이고 class 명이 value 라는걸 알 수 있다.
- class 명으로 스타일을 적용하기
- 두 개의 스타일을 지정할 경우
- 중괄호 안에 백틱을 사용해준다
- 전역으로 클래스를 선언해서 스타일을 적용하고 싶을 경우
- :global 을 사용해준다
전역으로 클래스를 선언할 경우, 클래스 이름이 고유한 이름으로 변경되지 않는다.