styled-components+TS 에서 전역 스타일 변수 설정하기

1. 먼저 패키지를 설치한다

// "styled-components" 설치
npm i styled-components

// "styled-components" 타입 정의 설치
npm i -D @types/styled-components

//"css reset" 설치
npm i styled-reset

 

2. 아래와 같이 파일을 생성한다.

 

2-1. GlobalStyles.ts

• css reset 및 전역적으로 사용할 css를 설정해준다.

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset"; // styled-reset 가져오기

const GlobalStyles = createGlobalStyle`
  ${reset}  // reset 적용

  /* Custom Global Styles */
  body {
   // 사용할 전역 스타일 설정
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  img {
    display: block;
    max-width: 100%;
  }

 
  @media (max-width: 768px) {
    body {
      font-size: 14px;
      line-height: 1.4;
    }
  }
`;

export default GlobalStyles;

 

 

2-2. theme.ts

• 전역에서 변수처럼 사용할 색상 및 크기 스타일을 지정해준다

const colors = {
  // COLOR WHITE
  white000: "#ffffff",
 ...
};

const fonts = {
  mainEngFont: "Montserrat",
  mainKorFont: "nanumSquareNeo",
  mainNumFont: "gmarket",
};

const sizes = {
  sm01: "0.75rem", 
  ...
};

const theme = {
  colors,
  fonts,
  sizes,
};

export default theme;

// theme 객체의 타입을 자동으로 추론하여 Theme 타입으로 지정
// 전역에서 자동완성을로 스타일을 사용하기 위함
export type Theme = typeof theme;

 

 

2-3. theme.d.ts

• styled-components의 DefaultTheme을 우리가 지정한 테마 타입을 상속시켜 확장하면,
• styled-components의 props에서 theme.colors.white000와 같은 방식으로 타입 검사를 수행하고 자동완성을 지원하게 할 수 있다!

import type { Theme } from "./theme";

// styled-components의 DefaultTheme을 확장해 우리가 만든 Theme 타입을 상속받아 포함하도록 한다. 
// 원래는 Theme 타입이 수정될 때마다 이 정의도 수정해야 하는데, 
// theme.ts에서 extends Theme 를 사용하여 Theme 타입의 변경 사항을 자동으로 반영할 수 있다.
declare module "styled-components" {
  export interface DefaultTheme extends Theme {
  
  }
}

 

 

3. GlobalStyles와 사용자 지정 스타일(theme) 적용하기

• ThemeProvider를 컴포넌트를 라우팅하는 BrowserRouter와 GlobalStyles를 감싸주도록 작성하면 된다.

import React from "react";
import HomeView from "@/pages/HomeView";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { ThemeProvider } from "styled-components";
import theme from "./assets/styles/theme";
import GlobalStyles from "./assets/styles/GlobalStyles";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyles />
      <BrowserRouter>
        <Routes>
          <Route index path="/" element={<HomeView />}></Route>
        </Routes>
      </BrowserRouter>
    </ThemeProvider>
  );
}

export default App;

 

4. 적용하기

• 이제 사용자 지정 스타일 변수를 사용할 때, 타입 검사가 정상적으로 작동하며 코드 작성 시 자동완성이 가능한 것을 확인할 수 있다!

const Container = styled.div`
  background-color: ${props => props.theme.colors.white000};
  color: ${props => props.theme.colors.black900};
`;