CSS Module

CSS Module을 이용하면 각 모듈에서만 불러온 css 파일이 적용되기 때문에

클래스 이름의 중복 걱정 없이 css 코드를 작성할 수 있다.

결과적으로 보다 간결하게 class 이름을 지을 수 있다.

 

npx create-react-app 명령어로 만든 프로젝트에서 사용할 수 있다.

.css 파일이 아닌 .module.css 확장자의 파일을 만들고

아래처럼 styles라는 변수로 불러와서 사용한다.

 

App.js

import styles from './App.module.css';

function App() {
  return (
    <section>
      <div className={styles.first}>hello</div>
      <span className={styles.second}>world</span>
    </section>
  );
}

export default App;

 

App.module.css

.first {
  color: dodgerblue;
}

.second {
  color: plum;
}

 

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