styled-components 전역 스타일링 (Global style)

컴포넌트 별로 스타일을 적용할 수 있지만 
reset과 같은 공통 css는 전역으로 선언을 해야한다. 

npm으로 설치해서 사용하는 방법(https://github.com/zacanger/styled-reset)과 
직접 스타일을 만들어서 import하는 방법이 있다. 

아래는 직접 스타일 파일을 만들어서 import하는 방법이다.

styled-components 에서는 createGlobalStyle을 제공해 전역으로 스타일링 할 수 있게 도와준다. 

 

reset.css - https://github.com/zacanger/styled-reset/blob/master/src/index.ts

 

1. GlobalStyle 파일을 만들고 reset css를 선언한다.

// GlobalStyle.tsx

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, menu, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  main, menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
`;

export default GlobalStyle;

2. 최상위 컴포넌트에 만든 GlobalStyle를 import한다. 

import GlobalStyle from "./GlobalStyle";
import Router from "./Router";

function App() {
  return (
    <>
      <GlobalStyle />
      <Router></Router>
    </>
  );
}

export default App;

전역 스타일에 구글 폰트 설정하기 
구글폰트사이트에서 원하는 폰트를 고르고 import 코드를 GlobalStyle에 넣어준다. 

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;600&family=Source+Sans+Pro:wght@300;400&display=swap');
   * {font-family: 'Noto Sans', sans-serif;}
`;

export default GlobalStyle;