Installation

# with npm
$ npm install --save styled-components

# with yarn 
$ yarn add styled-components

Styled Component 에서는 package.json 에 다음 코드를 추가하도록 권장하고 있다. 아래의 코드를 추가하면 여러 버전의 Styled Component가 설치되어 발생하는 문제를 줄여준다.

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

---

Dealing with Styled Component

Styled Component는 tagged template literals 라는 ES6 문법을 이용한다. 컴포넌트를 만들 때 해당 문법을 사용하여 컴포넌트의 스타일 속성을 정의하면 별도의 CSS 파일 없이도 스타일 속성을 지닌 컴포넌트를 만들 수 있다.

---

Adapting based on props & Extending Styles

• Styled Component는 스타일 속성을 지닌 컴포넌트를 정의할 때에 함수를 전달하고, 그 함수 안에서 props를 사용할 수 있다.

• <Button> 컴포넌트의 background와 color 속성은 primary 라는 props의 전달 여부에 따라 컬러값을 정의하고 있다.

// Button component
...
  background: ${(props) => (props.primary ? "palevioletred" : "white")};
  color: ${(props) => (props.primary ? "white" : "palevioletred")};
...

// App component
...
  <Button>Normal</Button>
  <Button primary>Primary</Button>
...

또한 같은 스타일 속성을 지닌 여러개의 컴포넌트들 중 몇 개의 컴포넌트에는 약간의 변화를 주고 싶은 경우가 있을텐데, 이때 상속 받고자 하는 스타일 속성을 지닌 컴포넌트를 styled() 로 감싼 뒤, 변경하고 싶은 속성만 새로 정의해 주면 기존 속성을 확장하여 사용할 수 있다.

// 기존의 Button 컴포넌트에 Tomato 컴포넌트만을 위한 새로운 속성 추가
const Tomato = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

---

Passed props

이번에는 아래의 Input 컴포넌트 color 속성에 주목해보자. props 로 color 속성이 전달된 Input 컴포넌트는 해당 color 속성이 글자색에 적용되고, props 가 전달되지 않은 Input 컴포넌트는 기본 색상(빨강)으로 적용된다. 이처럼 컴포넌트에 props로 스타일 속성이 전달되면 해당 컴포넌트는 props로 전달된 속성을 우선 적용하고, 전달되는 속성이 없다면 기본으로 설정된 속성을 적용한다.