ThemeProvider(styled-components)

모든 파일에 적용할때 손쉽게 사용할 수 있음

index.tsx(or App.tsx에도 가능)

const theme: any = {
  primaryColor: ['#a559f3', '#c282ef'],
  subColor: ['#8178f9', '#a680fb'],
};

// GlobalStyle의 경우 컴포넌트 가장 상단에 위치해야 적용됨
ReactDOM.render(
  <Provider store={store}>
    <SdkProvider>
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </ThemeProvider>
    </SdkProvider>
  </Provider>,
  document.getElementById('root'),
);

main.tsx

props로 가져와서 사용한다.

const MainWrap = styled.div<{ heightItem: string; widthItem: string }>`
  background-image: linear-gradient(
    to top,
    ${(props: any) => props.theme.primaryColor[0]},
    ${(props: any) => props.theme.primaryColor[1]}
  );
  width: 100%;
  height: 100%;
  font-family: RixHeadM, sans-serif;
  overflow: hidden;
  font-size: 21px;
  transition: background 1s ease-out;

  &.hidden {
    visibility: hidden;
  }
`;