1. GlobalStyle 적용하기

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  html,
  body,
  div,
  menu,
  nav,
  footer,
  header,
  nav,
  section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol,
  ul {
    list-style: none;
  }
  a,
  a:visited {
    text-decoration: none;
  }
  * {
    box-sizing: border-box;
  }
  `;

export default GlobalStyle;

위와 같이 GlobalStyle.js를 생성한 뒤 import { createGlobalStyle } from "styled-components"; 형태로 임포트를 한다.
GlobalStyle = createGlobalStyle`` 형식에서 백틱안에 모든 렌더에 적용할 CSS를 작성한다.
그리고 index.js에 해당 js파일을 임포트 한 뒤 render 부분에 컴포넌트를 추가 하면 된다.

2.Theme 적용하기

const theme = {
  fonts: {
    wBlue: "#3A68F9",
    wWhite: "#fff",
    fontBlack: "#333",
    wBlack: "#000",
    wGreen: "#22BD79",
    wLightGray: "#999",
    wDarkGray: "#666",
    font:
      "-apple-system, Helvetica, Arial, 'hiragino kaku gothic pro', meiryo, 'Microsoft YaHei', 'ms pgothic', 'Apple SD Gothic Neo', 'Nanum Gothic', 'Malgun Gothic', sans-serif",
  },
};

export default theme;

위와 같이 Theme.js 파일을 생성한 뒤 index.js에 import Theme from "./Styles/Theme"; 형태로 임포트 한다. 여기서 Theme은 ThemeProvider로 적용을 시켜야되는데 적용시키는 방법은 똑같이 index.js에 import { ThemeProvider } from "styled-components"; 을 임포트 한 뒤 render 될 컴포넌트들을 감싸줘야 한다. <ThemeProvider theme={Theme}> </ThemeProvider>

theme.js에서 설정한 값을 사용할려면 적용할 컴포넌트에서 ${(props) => props.theme.fonts.wBlue}; 로 값을 접근해서 사용하면 된다. 딱히 임포트는 안해도 된다.