createGlobalStyle

styled-components에는 전역 스타일을 한 번에 지정할 수 있는 createGlobalStyle이라는 메소드가 존재한다. 이를 이용하여 지정하고 싶은 모든 스타일을 미리 지정해둘 수 있다. 예를 들어, reset CSS 내용을 여기에 담아두면 전역 스타일 초기화를 할 수 있다.

사용법

import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle``
function App() {
  return (
    <>
      <GlobalStyle />
      <App />
    </>
  );
}

1. styled components에서 createGlobalStyle을 import한다.
2. 평범한 스타일 컴포넌트 만들듯이 컴포넌트를 만든다. 다만, 원래 HTML 태그를 작성하는 자리는 비워둔다.
3. 필요하다면 React.Fragment를 사용해 최상위 컴포넌트 위에 나란히 놓으면 적용된다.