[styled component] 기본 내장 함수(?)

/styles/global-styles.ts

:default.css(reset.css) 등을 셋팅할 때 쓴다.

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {
    display: block
  }
`;

export default GlobalStyle;

 

/styles/theme.ts

:defaultTheme 셋팅(더 이해해야 할듯..)

import { DefaultTheme } from "styled-components";

const theme: DefaultTheme = {
  color: {
    laundrygo: "#d0ff00",
    laundrygoLine: "#d1fe5c",
    white: "#fff",
    black: "#000",
  },
};

export { theme };

 

index.tsx에 컴포넌트 추가

import { ThemeProvider } from "styled-components";

import GlobalStyle from "./styles/global-styles";
import { theme } from "./styles/theme";

    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <App />
    </ThemeProvider>