> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/react-study/react-2/css-sass-module.md).

# CSS/Sass Module

스타일 파일 생성 

```css
/* Input.module.scss */

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

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

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

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

`className`에 설정한다. 

```javascript
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>
  )
}
```

{% embed url="<https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/>" %}