5분만에 알아보는 Styled-Components

1. Styled Component ?

Styled-Component 는 스타일을 가진 컴포넌트를 만들 수 있도록 도와주는 CSS-in-JS 라이브러리 입니다.

컴포넌트 선언법은 아래와 같습니다.

2. 유동적인 스타일을 가진 컴포넌트

유동적인 스타일 Prop 을 가진 컴포넌트를 만들어서 사용할 수 있습니다.

3. 스타일 상속

Styled-Component 로 만들어진 컴포넌트들은 스타일 상속이 가능합니다.

4. as 를 이용한 Element Tag 변경

as Props 를 이용하면 Element Tag 변경이 가능합니다.

5. Mixin 을 사용하여 스타일 정의하기

Mixin 을 이용하면 중복되는 스타일을 줄일 수 있습니다.
Container 와 Section 모두 Margin 값이 필요합니다.

아래처럼 같은 코드를 정의해주는 것보다는 Mixin 을 활용하여 코드를 줄이는 것이 좋습니다.

6. createGlobalStyle 을 이용한 전역 스타일

createGlobalStyle 을 이용하면 글로벌하게 스타일을 적용 할 수 있습니다.
reset css 스타일을 적용 할 때 유용하게 이용 할 수 있습니다.

7. 내부에 속한 특정 컴포넌트 스타일

Styled-Component 내부의 특정 컴포넌트를 명시하여 스타일을 추가 할 수 있습니다.

8. 타입스크립트 환경에서 Styled-Component 사용하기

타입스크립트에서는 style prop 을 정의하면 해당 prop 의 type 을 정의해주어야합니다.

9. Theme Provider 를 이용한 Dark Mode 스타일 적용하기

https://simplereact.gitbook.io/simplereact/dark-mode

결과

github: https://github.com/appear/React-Example-Project/tree/master/five-minute-styled-components