React - PostCSS(CSS Modul)

김해김씨가오리·2022년 12월 6일
0

REACT

목록 보기
12/14

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;
}

profile
그냥 기록용!!!

0개의 댓글