CSS/Sass Module

스타일 파일 생성

/* Input.module.scss */

.input {
  display: bloc;
  width: 300p;
  padding: 2em 3e;
  background: pink;
}

사용할 컴포넌트에서 module 스타일 파일을 불러올 때 style로 불러와서 사용한다.

import style from './Input.module.scss'

// 객체 구조 분해 할당 
import { input } from './Input.module.scss' 

className에 설정한다.

import React from 'react' 
import { input } from './Input.module.scss' 

const Input = (props) => {
  const { size, placeholder, children, ...restProps } = props
  return (
    <input
      type="text"
      placeholder={placeholder}
      // 클래스 이름에 설정 
      className={input}
      {...restProps}
    >
      {children}
    </input>
  )
}

Adding a CSS Modules Stylesheet | Create React Appcreate-react-app.dev