서론 : 왜 사용하나?

Theme : 테마에 저장해 놓고, 전역에 테마를 주고 렌더트리에 있는 모든 컴포넌트에서 접근하자
GlobalStyle : 프로젝트시작 전에 공통으로 적용해야할 코드를 적고 싶을 때!

Styled Components 공식 사이트
테마
글로발스타일

Theme

타입스크립트 (권장)
작업속도가 증가해요

사용

(1) Typescript declarations file 만들기

타입스크립트로 사용할때는 styled components 에서 제공하는 DefaultTheme interface를 먼저 선언하고 시작해야된다. 안하면 타입스크립트가 에러를 뱉는다.

// import original module declarations
import 'styled-components';

// and extend them!
declare module 'styled-components' {
  export interface DefaultTheme {
    // 여기에 적용하고 싶은 속성과 타입을 정의한다
    borderRadius: string;

    colors: {
      첫번째: string;
      두번째: string;
    };
  }
}

(2) Theme file 만들기

Default Theme를 정의했으면 가져다가 쓰면 된다. 만약에 정의 안한 속성을 입력하면 타입스크립트에 에러를 뱉는다.

import { DefaultTheme } from 'styled-components';

const 테마: DefaultTheme = {
  borderRadius: '5px',

  colors: {
    첫번째: 'cyan',
    두번째: 'magenta',
  },
};

export { 테마 };

(3) Theme Provider 로 Theme 공급

Theme를 만들었으면 Theme를 언제 어디서든 공급해주는 공급책에 넘겨줘야 된다. 주고나면 프로젝트 어디서든 props로 배달해준다.

import styled, { ThemeProvider } from 'styled-components'
import 테마 from './theme'

const Box = styled.div`
  color: ${props => props.테마.color.첫번째};
`

render(
  <ThemeProvider theme={테마}>
    <Box>I'm mediumseagreen!</Box>
  </ThemeProvider>
)

Global Style

프로젝트 초기에 nomalize css 또는 사용자가 전역으로 사용할 style을 정의하여 프로젝트 전체에 적용시킬때 사용한다. styled components 가 지원하는 createGlobalStyled 메소드를 사용하여 생성한다.

(1) GlobalStyle components 생성

createGlobalStyled 로 원하는 css를 정의

// GlobalStyle.jsx
import { createGlobalStyle } from "styled-components";
import normalize from "styled-normalize"; // 필요하면 설치하시오

const GlobalStyle = createGlobalStyle`
  ${normalize}

  * {
    box-sizing: border-box;
  }

  body {
    font-family: "고딕", sans-serif;
    line-height: 1.5;
  }
`;
export default GlobalStyle;

(2) GlobalStyle에 사용하기

props로 전달한 값으로 스타일을 설정할 수도 있음!
ThemeProvider로 Theme 전달시에는 Theme에도 접근 가능!

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
    font-family: ${props => props.테마.fontFamily};
  }
`

<ThemeProvider theme={테마}>
	<GlobalStyle whiteColor />
</ThmeProvider>

결론 : 어떻게 쓸 것인가

1. Global-style : nomalize를 사용해서 리셋 시키거나 styled-components 에서 지원하는 css메소드로 자주 사용하는 리셋파일을 만들어놓고 import 해서 사용가능.
2. Theme : context api를 이용하는 만큼 어디에서든 접근할 수 있는 스타일용 오브젝트가 생겼다고 생각하면 엄청나게 유용하게 쓸 수 있음. ex) 반응형 코드를 간편하게 사용할 수 있음. (추후 업데이트 하면 링크남김)