코드코코

[리액트] CSS module 본문

기록/정리

[리액트] CSS module

코드코코 2021. 10. 26. 12:30

CSS module

-CSS 클래스가 중첩되는 것을 완벽히 방지

-CRA 로 만든 프로젝트에서 CSS Module 를 사용 할 때, CSS 파일의 확장자를 .module.css 로 한다.

-styles.icon 이런 식으로 객체안에 있는 값을 조회

  >>만약 클래스 이름에 - 가 들어가 있다면 다음과 같이 사용: styles['my-class']

  >>여러개가 있다면 다음과 같이 작성: ${styles.one} ${styles.two}

  >>조건부 스타일링 : ${styles.one} ${condition ? styles.two : ''}

- Sass 에서도 사용가능 : 확장자를 .module.scss 로