// index.tsx

import { ThemeProvider } from 'styled-components';

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={ {darkColor: "black"} }>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

ThemeProvider는 테마를 위한 도우미 컴포넌트 입니다.

컨텍스트 API를 통해 구성 요소 트리에서 <ThemeProvider> 아래에 있는 모든 스타일 구성 요소에 ‘theme’ 를 삽입합니다.

컴포넌트 객체 <ThemeProvider> 아래의 styled-components 스타일이 지정된 모든 컴포넌트에 ‘theme’ 로 삽입될 객체입니다. → <App /> 안에 포함되어 있는 모든 하위 컴포넌트의 스타일 구성요소에 theme props를 넘겨줍니다.

DefaultTheme 파일 만들기

ThemeProvider를 사용하기 전에 사용 할 Theme 에 대한 정의가 먼저 필요할 것입니다.

어두운 테마, 밝은 테마, 등..

이런 테마들을 만들기 위해 테마들의 요소들과 타입을 정의할 수 있도록 제공하는 모듈이 바로 DefaultTheme 입니다.

// styled.d.ts

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

// and extend them!
declare module 'styled-components' {
  export interface DefaultTheme {

		// user write..
    textColor: string;
    bgColor: string;
    btnColor: string;
  }
}

파일명은 styled.d.ts 로 생성하고 해당 파일 안에 작성해 주어야 다음과 같은 에러가 나지 않습니다.

Parsing error: Only declares and type imports are allowed inside declare module

Theme 파일 만들기

DefaultTheme 에 테마에 대한 정의를 하였다면 다음은 Theme 파일을 만들고 원하는 테마 객체를 만들어야 합니다.

// theme.tsx

import { DefaultTheme } from 'styled-components';

export const lightTheme: DefaultTheme = {
  bgColor: "white",
  textColor: "black",
  btnColor: "tomato",
}

export const darkTheme: DefaultTheme = {
  bgColor: "black",
  textColor: "white",
  btnColor: "teal",
}

createGlobalStyle 작성