[react] ThemeProvider 사용하기

반응형

🖥️  ThemeProvider ?

지정된 디자인 시스템을 모든 코드에서 사용하기 위해서는 어떻게 해야할까 !?

그때 사용하는 것이 ThemeProvider이다.

React 컴포넌트에서 테마에 대한 정보를 제공하는 역할이라고 한다. 이를 사용하면 하위 컴포넌트에서 공통 theme을 사용할 수 있다.

색상값은 props를 통해 전달한다.

 

 

🖥️  어떻게 사용할까?

1. theme 파일을 만들고, 해당 파일에 색상을 지정한다.

다음은 내가 지정한 theme 색상이다. 

// styles/theme.js

const theme = {
  colors: {
    background: "#121212",
    text: "#ececec",
    primary: "#63e6be",
    primary2: "#62E6BE",
    white1: "#F1F3F5",
    white: "#FFFFFF",
    unSelected: "#ACACAC",
    secondBlack: "#1E1E1E",
    divider: "#2A2A2A"
  },
};

export default theme;

 

 

2. import 하기

그리고 해당 파일을 사용할 수 있도록 상단에 import 해주면 된다.

import { ThemeProvider } from "styled-components";
import theme from "../../styles/theme";

 

 

3. App.js에 사용하기

import theme from "./styles/theme";
import Router from "./router/Router";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Router />
    </ThemeProvider>
  );
}

export default App;

이렇게 생성한 객체를 ThemeProvider의 props로 넣어주면 된다 !!

 

 

4. 실제 코드에서 사용하기

background-color: ${theme.colors.background};

 

 

이렇게 하면, theme 파일에 있는 색상들을 다른 파일에서도 사용할 수 있다 !!