styled components를 사용할 때와 같이 css를 컴포넌트 별로 구분해서 사용하고자 할 때 사용한다.
클래스 이름을 고유하게 바꿔준다. 컴포넌트이름-클래스이름-고유해쉬값으로 겹치지 않도록
우선 module을 css 파일 이름에 넣는다.
원래 Button.css라면 Button.module.css로 이름을 바꾼다
그리고 임포트 한다.
import styles from './Button.module.css'
이렇게 이름을 붙혀서 임포트한다.
원래는 import'./Button.css' 이렇게 임포트 하는데 색다르네
사용법은 Button.css에 button이라는 클래스가 있을 때
<button className={styles.button}></button>이렇게 사용한다.
클래스 이름에 -가 있으면
className={styles['button-hi']}이런 형식으로 한다.
동적인 클래스 추가는 일반 css와 다르지 않다.
<button className={`${!isValid && styles.invalid}`}></button>미디어 쿼리도 그냥 css 파일에 추가하면 된다. 일반 css와 다르지 않다
