CSS Module

// App.js
<Button />
<Checkbox />

// Button.js
import "./Button.css";
<div className="Button">
  <span className="text">Button</span>
</div>

// Checkbox.js
import "./Checkbox.css";
<div className="Checkbox">
  <span className="text">Checkbox</span>
</div>

/* Button.css */
.Button {color: blue;}

/* Checkbox.css */
.Checkbox {color: red;}
.text {text-decoration: underline;}

CSS 파일이 각각 다른 컴포넌트 내에 import 되었지만 클래스가 같을 경우 충돌하게 된다.😣

CSS Module

// Button.js
import styles from "./Button.module.css";
<div className={styles.Button}>
  <span className={styles.text}>Button</span>
</div>

// Checkbox.js
import styles from "./Checkbox.module.css";
<div className={styles.Checkbox}>
  <span className={styles.text}>Checkbox</span>
</div>

/* Button.module.css */
.Button {color: blue;}

/* Checkbox.module.css */
.Checkbox {color: red;}
.text {text-decoration: underline;}

🔼 CSS Module 내에서 .text를 찾아 고유 CSS 클래스를 할당하고 없으면 부여하지 않는다.

🔽 CSS Module 내에서 :global 선택자를 사용해 전역 클래스 .text에 style을 줄 수 있다.

// Button.js
import "./Button.css";
<div className={styles.Button}>
  <span className="text">Button</span>
</div>

// Checkbox.js
import "./Checkbox.css";
<div className={styles.Checkbox}>
  <span className="text">Checkbox</span>
</div>

/* Checkbox.module.css */
:global .text {text-decoration: underline;}
:global(.text) {text-decoration: underline;}

CSS Modules - Exceptions | GitHub