🙆🏻‍♀️ [React] css 중복 피하기 🙆🏻‍♀️

편의상 페이지마다 css파일을 나눠서 작성한다.
하지만 같은 클래스명을 지정한다?
(a.css 파일의 .title, b.css 파일의 .title)
번들 과정 중에 같은 클래스로 인식하고 원하는 결과를 기대할 수 없게 된다.

CRA(create-react-app)으로 만든 프로젝트는 module css를 제공한다.

방법은 간단하다. 확장자를 module.css로 작성한다.

(원하는 파일 명).module.css

그 다음 사용할 때는 참조변수를 사용하여 import 한다.

import style from "./a.module.css";

export default function Layout({ children }) {
  return (
    <div className={style.title}>
     <h1>이것은 제목입니다?</h1>
    </div>
  );
}

공통으로 스타일을 주고 싶다면?

클래스명 앞에 :global을 붙이면 된다.

:global .container{ /* something */}

Adding a CSS Modules Stylesheet