styled-components에서 제공하는 ThemeProvider를 이용하면 자주 사용하는 css를 변수로 설정할 수 있다. 이 기능을 기존에 자바스크립트를 사용하는 프로젝트에서는 몇 번 사용해봤는데, 타입스크립트에서 처음 사용하려니 조금 헷갈렸다. 그래서 나같은 사람에게 도움이 될 수 있도록 이 글을 작성한다.
타입스크립트에서는 theme 파일을 작성하기 전에 type을 선언해줘야 한다. theme.ts와 같은 styles 폴더에 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를 선언하자.
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로 감싸주기만 하면 끝이다.
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>
);
}
자, 이렇게 어느 컴포넌트에서든 가져다 쓸 수 있는 전역 스타일을 만들었다.
잘보고갑니다! 감사합니다