리액트 테마 ThemeProvider 정리

리액트의 sytled-component는 ThemeProvider를 제공한다

ThemeProvider로 공통 스타일 속성을 제어할 수 있다.

 

💡참고 문서

https://styled-components.com/docs/api#typescript

 

import { ThemeProvider } from 'styled-components';

우선 styled-components에서 ThemeProvider를 import 해 온다

 

타입스크립트용 정의를 위해 src/styled.d.ts 파일을 생성한다

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

// and extend them!
declare module 'styled-components' {
  export interface DefaultTheme {
    borderRadius: string;

    colors: {
      main: string;
      secondary: string;
    };
  }
}

위와 같이 DefaultTheme 인터페이스를 생성하고 필요한 항목들을 정의해준다

 

 

src/theme.ts(예시) 파일을 생성해 실제 내가 원하는 테마를 정의한다.

import { DefaultTheme } from "styled-components";

export const lightTheme: DefaultTheme = { // DefaultTheme에 항목들이 더 있는 상황에서 여기에 설정을 하지 않았으면 오류라고 알려줌
    bgColor: "whitesmoke",
    textColor: "black",
    btnColor: "tomato",
}

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

 

DefaultTheme을 import 해오고 lightTheme, darkTheme을 설정해줬다

 

각 테마를 수정할 때 DefaultTheme의 항목들이 모두 설정되지 않으면 오류가 표시된다

 

 

이렇게 만든 테마는 index.tsx에서 import 해오고

App 컴포넌트를 ThemeProvider로 감싸고 theme 인자를 줌으로써 사용할 수 있다

import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'styled-components';
import App from './App';
import { darkTheme, lightTheme } from './theme';

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

 

 

UI를 수정할 때 수많은 항목들 중 한두가지가 빠질 수도 있는데 ThemeProvider를 사용하면 그런 오류 걱정은 없을듯하다