Next.js 에 있는 module.css 사용법에 대해 정리해보았다.

CSS mosules

CSS mosules는 css를 모듈처럼 사용할 수 있는 장점이 있으며 클래스 명에 해쉬 값을 붙여 다시 생성하고, 그 값을 모듈로 내보내서 사용하는 방식으로 클래스 명이 충돌하는 단점을 극복할 수 있다.

파일 명

파일 명은 대문자로 시작하는 이름.module.css 로 명하면 된다. ex) Home.module.css

{이름}.module.css

사용법

사용할 module.css 파일을 import 해와 className에 적용하면된다.

// index.jsx
import styles from "@/styles/Home.module.css";

export default function Home() {
  return (
	  <div className={styles.test}>
		  <p>Hello</p>
	  </div>
  )
}

// Home.module.css
.test {
   padding: 40px 0;
	 background-color: pink;
}

스타일을 여러 개 지정할 경우

`` 백틱을 활용하면 된다.

export default function Home() {
  return (
	  <div className={`${styles.test} ${styles.testTwo} layout_size`}>
		  <p>Hello</p>
	  </div>
  )
}

자식에 이어서 스타일 적용

클래스 이름이 자동으로 해싱되어 생성되어 styles이 적용된 자식 태그 중 클래스 명이 부여된 자식에 스타일을 부여하면 적용이 안된다. (ex. .test . title)

이 문제를 해결하기 위해 css modules에서 제공하는 가상 선택자가 있다.

사용 예시

// index.jsx
export default function Home() {
  return (
	  <div className={styles.test}>
		  <p className="title">Hello</p>
		  <span>Lorem Ipsum is simply dummy text</span>
	  </div>
  )
}

// Home.module.css
.test {
   padding: 40px 0;
	 background-color: pink;
}

.test :global(.title) {
  font-size: 40px;
}

.test span {
	font-size: 20px;
  word-break: keep-all;
}