PostCSS

App.js

import Button1 from "./components/Button1";
import Button2 from "./components/Button2";

function App() {
    return (
        <>
            <Button1 />
            <Button2 />
        </>
    );
}

export default App;

---

Button1.jsx

import React from "react";
import styles from "./Button1.module.css";

export default function Button1() {
  	// 요소 간의 class명이 같을 경우, 가장 나중에 import된 css파일의 스타일이 그 class명을 가진 모든 요소에 적용됨
    // return <button className="button">Button</button>; 
  	// 위 같은 경우 Button2 주석처리된 요소의 class명과 같으므로, Button2의 css 스타일이 적용됨
  	// 따라서 각각의 css파일에 똑같은 class명을 사용하고 싶다면 PostCSS를 사용함
  	// PostCSS는 선택자(Selector)마다 새로운 이름을 만들어서 객체로 넘겨줌
    return <button className={styles.button}>Button</button>;
}

---

Button2.jsx

import React from "react";
import style from "./Button2.module.css";

export default function Button2() {
    // return <button className="button">Button2</button>;
    return <button className={style.button}>Button2</button>;
}

---

Button1.module.css

.button {
    background-color: aqua;
}

---

Button2.module.css

.button {
    background-color: palegreen;
}

---

View