CSS Modules(컴포넌트 스타일링)

CSS Modules

• 각 컴포넌트에 국한된 스타일을 작성할 수 있는 방법

• 클래스 이름이 고유하게 생성되어 다른 컴포넌트와의 충돌을 방지
• 즉, 클래스 이름을 여러 컴포넌트와 같게 해도, 고유한 이름으로 매겨줌

• 사용법
1. 이름.module.css 확장자로 파일을 만듦(파일 위치는 아무데나 상관 없음)
2. css파일에 클래스 이름 당 스타일을 할당

.nav {
  background-color: red;
}

.nav ul {
  display: flex;
}

3. 해당 파일을 컴포넌트에서 import (js객체 처럼 import : import style from “~.module.css” )
4. 쓰고 싶은 jsx의 class이름으로 2객체.클래스이름 으로 해주면, 고유 클래스 이름

import style from "../../styles/Navigation.module.css";

export default function Navigation() {
  ...
  return (
    <nav className={style.nav}>
	    <ul>...</ul>

이렇게 하면, 해당 nav의 클래스 이름이 navigation_nav__고유값 같은 형태가 됨
 

1. global.css 같이 파일 아무곳에나 만듦

2. 최상위 layout, 즉 app/layout.tsx 에 1번을 import