---
title: 'styled-components로 스타일 적용하는법'
category: styledComponents
tags:
- react
- css
published: true
date: 2020-10-07 21:29:18
description: 'styled components가 쓰고 싶습니다'
template: post
---
먼저 [styled components](https://styled-components.com/)를 쓰는 방법을 간단하게 살펴보자.
## Table of Contents
## Create
```javascript
import styled from 'styled-components'
const Button = styled.button`
display: inline-block;
padding: 6px 12px;
font-size: 16px;
font-family: Arial, sans-serif;
line-height: 1.5;
color: white;
background-color: #6c757d;
border: none;
border-radius: 4px;
:not(:disabled) {
cursor: pointer;
}
:hover {
background-color: #5a6268;
}
`
```
`styled` 컴포넌트를 임포트하고, `button`과 함께 사용하여 백틱 두개 사이에서 스타일을 적용하였다. `button` 대신에 `h1` `p` 등의 HTML elements를 사용할 수 있으며, 스타일에는 유효한 모든 CSS 문법이 가능하다.
## Usage
이렇게 만든 styled component는 리액트 컴포넌트와 마찬가지로 JSX 문법을 이용하여 사용할 수 있다.
```javascript
const App = () => {
return (
)
}
```
## Internal
이렇게 해서 만들어진 `button`을 한번 살펴보자.
https://codesandbox.io/embed/sweet-forest-1eix4?fontsize=14&hidenavigation=1&theme=dark
```html
```
그렇다면 내부에서는 어떻게 작할까?
1. styled components는 정의된 스타일을 기반으로 유니크한 클래스명을 만든다.
2. HTML `` 영역에 `