React - PostCSS(CSS Modul)

className 부여하여 버튼에 스타일 주기..

App.jsx

import React from 'react';
import "./App.css";
import Button1 from "./components/Button1"
import Button2 from "./components/Button2"


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

export default App;

Button1.jsx

import React from 'react'
import "./Button1.css"

const Button1 = () => {
  return (
    <button className='button'>BUTTON1</button>
  )
}

export default Button1

Button1.css

.button{
    background-color: aqua;
}

Button2.jsx

import React from 'react'
import './Button2.css'

const Button2 = () => {
  return (
    <button className='button'>BUTTON2</button>
  )
}

export default Button2

Button2.css

.button{
    background-color: red;
}

Button이 모두 Button2.css로 적용되는 불상사..

PostCSS(CSS Module)

CSS 클래스가 중첩되는 것을 완벽히 방지.
CSS Module 사용시, CSS 파일의 확장자 :
.module.css
리액트 컴포넌트 파일에서 해당 CSS 파일을 불러올 때 CSS 파일에 선언한 클래스 이름들이 고유해짐.

Button1.jsx

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


const Button1 = () => {
  return (
    <button className={styles.button}>BUTTON1</button>
  )
}

export default Button1

import styles from "./Button1.module.css"// import로 불러온 styles 객체 안의 값을 참조해야 함.

Button1.module.css

.button{
    background-color: aqua;
}

Button2.jsx

import React from 'react'
import aa from './Button2.module.css'

const Button2 = () => {
    return (
        <button className={aa.button}>BUTTON2</button>
    )
}

export default Button2

import aa from './Button2.module.css'// import하는 객체의 이름은 자유롭게 선언.

Button2.module.css

.button{
    background-color: red;
}