[Styled Components] Styled Components Global Style

Styled Components는 createGlobalStyle()라는 함수를 제공하고 있다.

사용법은 아래와 같다.

 

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  html {
    font-size: 100%;
  }

  body {  
    background-color: #eee8aa;
  }
`

export default GlobalStyle

 

작성한 전역 스타일 컴포넌트를 애플리케이션의 최상위 컴포넌트에 추가해주면 하위 모든 컴포넌트에 해당 스타일이 일괄 적용된다.

// App.jsx

import GlobalStyle from "./GlobalStyle";
import Router from './components/shared/Router'

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

export default App;