styled-components로 theme적용하기 with Typescript

1. styled.d.ts 파일을 만들어서 theme에 들어가는 속성 타입 정의

// src/styled.d.ts
import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    textColor: string;
    bgColor: string;
  }
}

 

2. theme.ts 파일 만들고 테마 값 선언

// src/theme.ts
import { DefaultTheme } from "styled-components";

export const lightTheme:DefaultTheme = {
  textColor: '#000',
  bgColor: '#fff'
}

export const darkTheme:DefaultTheme = {
  textColor: '#fff',
  bgColor: '#000'
}

 

3. 최상위 컴포넌트에서 theme-provider로 컴포넌트 감싸고 theme props 내려주기

// src/index.tsx
import { darkTheme, lightTheme } from "./theme";

import App from "./App";
import React from "react";
import ReactDOM from "react-dom/client";
import { ThemeProvider } from "styled-components";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
    <ThemeProvider theme={lightTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

 

4. 하위 컴포넌트에서 props.theme로 받아서 사용하면 된다. 

import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
  width: 100%;
  align-items: center;
  text-align: center;
  height: 500px;
  background-color: ${(props) => props.theme.bgColor};
`;

const Text = styled.span`
  width: 100%;
  flex: 1;
  font-size: 30px;
  color: ${(props) => props.theme.textColor};
`;

const App = () => {
  return (
    <Wrapper>
      <Text>test</Text>
    </Wrapper>
  );
};

export default App;