[styled-components] TypeScript에서 전역 스타일(Global Style) 적용하기

declarations file 만들기

// styled.d.ts
import "styled-components";

declare module "styled-components" {
  export interface DefaultTheme {
    colors: {
      gray_100: string;
      gray_200: string;
    };
  }
}

먼저, 선언 파일을 생성해준다.
그리고 DefaultTheme에 타입을 추가 해준다.

(+ d.ts파일은 구현부가 아닌 선언부만을 작성하는 용도의 파일로, JS코드로 컴파일되지않음.
선언 코드(declare)만 작성이 가능)
이제,DefaultTheme는 prop.theme에 적용시켜줄 것이다. 

theme 만들기

이제 위에서 선언한 DefaultTheme을 사용하여 테마를 만들 수 있다.

import { DefaultTheme } from "styled-components";

const theme: DefaultTheme = {
  colors: {
    gray_100: "#808080",
    gray_100: "#949494",
  },
};
export default theme;

ThemeProvider 추가

import theme from "./styles/theme";

ReactDOM.render(
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>,
  document.getElementById("root")
);

index.tsx혹은 App.tsx에서 감싸주자!

Styling components

// in components
import styled from "styled-components";

export const Div = styled.div`
  background-color: ${(props) => props.theme.colors.gray_100};
`;

이제 original import 만으로 styled-components를 만들 수 있다!

++ 전역 스타일로 colors를 추가해 줄 수도 있지만 코드길이가 너무길다 ;;
다음 블로그에서는 CSS var()를 사용해 전역적으로 사용할 color들을 가져와보자