🚀 Styled-component으로 시작하기

Styled-component의 Theme을 설정한다.

디랙토리 구조

global.ts

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
    * {
        margin: 0;
        padding: 0;
    }
    body {
        box-sizing: border-box;
    }
`;

export default GlobalStyle;

css 초기화

styled.d.ts

import "styled-components";

declare module "styled-components" {
  export interface DefaultTheme {
    color: {
      main: string;
      second: string;
      error: string;
      success: string;
    };
  }
}

theme.ts

import { DefaultTheme } from "styled-components";

const theme:DefaultTheme = {
    color: {
        main: "#02343F",
        second: "#F0EDCC",
        error: "#e74c3c",
        success: "#2ecc71",
    },
};

export default theme;