[TIL] styled-components 공통 스타일 속성을 typescript로 세팅하기

styled-components에서 제공하는 ThemeProvider를 이용하면 자주 사용하는 css를 변수로 설정할 수 있다. 이 기능을 기존에 자바스크립트를 사용하는 프로젝트에서는 몇 번 사용해봤는데, 타입스크립트에서 처음 사용하려니 조금 헷갈렸다. 그래서 나같은 사람에게 도움이 될 수 있도록 이 글을 작성한다.

타입스크립트에서는 theme 파일을 작성하기 전에 type을 선언해줘야 한다. theme.ts와 같은 styles 폴더에 styled.d.ts라는 파일을 생성해보자.

1. styled.d.ts

import "styled-components";
import { ColorsTypes, FontSizeTypes } from "./theme";

declare module "styled-components" {
  export interface DefaultTheme {
    colors: ColorsTypes;
    fontSize: FontSizeTypes;
  }
}

끝! 간단하다. 나는 자주 쓰는 색상과 폰트 사이즈만 변수로 설정했다.
처음엔 잘 모르고 아래처럼 변수마다 하드코딩 했는데..

colors: {
      header: string;
      primary: string;
      white: string;
      black: string;
      };

이건 너무 야만적인 방식이다. 앞서 적었던 것처럼 해야 간단하면서 유지보수도 쉬워진다.
아무튼 타입 선언이 끝났으니 theme.ts에 자주 사용할 css를 선언하자.

2. theme.ts

import { DefaultTheme } from "styled-components";

const colors = {
  header: "#1565C0",
  primary: "#2196F3",
  white: "#ffffff",
  black: "#000000",
  buttonOrange: "#FFA000",
  dateText: "#939FA5",
  border: "#E5E5E5",
  toggleOn: "#2196F3",
  toggleOff: "#F5F5F5",
};

const fontSize = {
  title: 20,
  subTitle: 16,
  text: 14,
};

export type ColorsTypes = typeof colors;
export type FontSizeTypes = typeof fontSize;

const theme: DefaultTheme = {
  colors,
  fontSize,
};

export default theme;

이런 식으로 theme.ts 파일을 만들었으면 App에서 ThemeProvider로 감싸주기만 하면 끝이다.

3. App.ts

import React from "react";
import GlobalStyles from "styles/GlobalStyles";
import { ThemeProvider } from "styled-components";
import { theme } from "styles/theme";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <GlobalStyles />
      </div>
    </ThemeProvider>
  );
}

자, 이렇게 어느 컴포넌트에서든 가져다 쓸 수 있는 전역 스타일을 만들었다.