[React+TS] styled-components, ThemeProvider 타입 정의하기

⚡️ styled-components ThemeProvider

---

대표적인 CSS in JS 라이브러리인 styled-components는 기본적으로
스타일을 전역적으로 공유하는 ThemeProvider를 제공합니다.

사용방법은 다음과 같이 간단합니다.

 

📌 ThemeProvider

import { ThemeProvider } from "styled-components";

const theme = {
  color1: "#000",
  color2: "#001",
  color3: "#002"
};

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      ...
    </ThemeProvider>
  );
}

다음과 같이 최상위 컴포넌트에 ThemeProvider를 감싸주고 theme props를 넣어줍니다.

---

📌 theme 사용 방법

import styled from "styled-components";

export const Container = styled.div`
  background: ${(props: any) => props.theme.color1};
`;

위에서 설정해준 theme은 전역으로 props.theme으로 사용이 가능합니다.

 

그러나 기본적으로 styled-components에서 theme type 인식 기능을 제공하지 않기 때문에
위와 같은 방식으로 props를 any로 타입을 지정해주어야 오류 없이 사용할 수 있습니다.

 

그런데 이렇게 any를 사용하면 TypeScript의 강력한 기능인 자동완성 기능을 사용할 수 없으니
지정해 둔 테마가 많아질 수록 불편함이 늘어날 것입니다.

 

⚡️ ThemeProvider DefaultTheme 타입 선언하기

---

props의 theme은 DefaultTheme이란 타입으로 정의되어 있지만 우리가 넣어준 타입을 읽지 못하니
declare를 이용해 컴파일러에게 타입정보를 알려주도록 하겠습니다.

 

📌 theme 타입 추출

export const theme = {
  color1: "#000",
  color2: "#001",
  color3: "#002"
};

export type ThemeType = typeof theme;

우선 타입을 정의하기 전에 테마 정보를 추가할 때마다 테마 타입을 일일이 수정하기 귀찮으니
다음과 같이 ThemeType을 정의합니다.

---

📌 styled-components.d.ts

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

declare module "styled-components" {
  export interface DefaultTheme extends ThemeType {}
}

styled-components의 DefaultTheme 타입에 위에서 생성한 ThemeType을 extends 해주면 끝입니다.

이제 사용해보면 정의한 theme의 속성이 잘 표시되는 것을 확인할 수 있습니다.