module css

module.css는 css를 사용할 때 클래스 이름을 고유한 값으로 자동으로 만들어서
컴포넌트 스타일 클래스 이름이 중첩되는 것을 방지해준다.

장점

• 클래스명이 충돌되는 상황을 방지할 수 있다.
• 컴포넌트 단위로 스타일을 적용할 수 있다.

사용법

Button.module.css

.btn {
  color: white;
  background-color: tomato;
}

적용법

import styles from "./Button.module.css";

function Button({ text }) {
  return <button className={styles.btn}>{text}</button>;
}

export default Button;

여러 클래스 적용

백틱(`) 사용

<button className={`${styles.btn} ${style.font}`}>{text}</button>