1. 설치


CLI

npm install --save styled-components
// typescript
npm i styled-components && npm i -D @types/styled-components

package.json

{
"resolutions" : {
  "styled-components" : "^5"
}
}

// 이 코드를 package.json에 추가하면 
// 여러 버전의 styled-components가 설치되어 발생하는 문제를 줄여줌

2. 컴포넌트 만들기


import styled from 'styled-components';

const button1 = styled.button`
  background-color : silver;
`

3. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기


const silverButton = styled(button1)`
  padding : 20px;
  margin : 20px;
`

4. props 활용하기