[리액트 마스터 클래스] TypeScript와 Styled-components로 테마 설정하기

TypeScript에서 styled-components를 사용해 어떻게 테마 설정을 하는지 알아보자!

styled-components 설치

npm install @types/styled-components

TypeScript 선언 파일 생성

styled.d.ts
styled.d.ts 파일을 생성하여 styled-components의 DefaultTheme 인터페이스를 확장한다.

import "styled-components";
declare module "styled-components" {
  export interface DefaultTheme {
    textColor: string;
    bgColor: string;
    btnColor: string;
  }
}

테마 객체 생성

theme.ts
theme.ts 파일을 생성하여 light테마와 dark 테마를 정의한다.

import { DefaultTheme } from "styled-components";
export const lightTheme: DefaultTheme = {
    bgColor: "white",
    textColor: "black",
    btnColor: "tomato",
};
export const darkTheme: DefaultTheme = {
    bgColor: "black",
    textColor: "white",
    btnColor: "teal",
};

ThemeProvider 설정

index.tsx
index.tsx 파일에서 ThemeProvider를 import하여 App 컴포넌트를 감싸준다.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ThemeProvider } from "styled-components";
import { darkTheme, lightTheme } from "./theme";
const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <ThemeProvider theme={lightTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

스타일 적용

App.tsx

import styled from "styled-components";
function App() {
  return (
    <Container>
      <H1>TypeScript!</H1>
    </Container>
  );
}
const Container = styled.div`
  background-color: ${(props) => props.theme.bgColor};
`;
const H1 = styled.h1`
  color: ${(props) => props.theme.textColor};
`;
export default App;