Styled Components 전역 스타일링 (Global Style)

컴포넌트 레벨 스타일링

개별 컴포넌트 단위로 스타일링

 

애플리케이션 레벨 스타일링

모든 컴포넌트에 동일하게 적용하는 스타일

• 애플리케이션 레벨 스타일을 지원하기 위해서 Styled Components는 createGlobalStyle()라는 함수를 제공한다.

const GlobalStyle = createGlobalStyle`
  body {
    background: #e9ecef;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <div>안녕하세요</div>
    </>
  );
}

export default App;

전역스타일 컴포넌트를 최상위 컴포넌트 App에 추가해주면, 하위 모든 컴포넌트에 스타일이 적용된다

 => 이 때, 전역 스타일 컴포넌트 내부로 하위 컴포넌트를 포함시키는 것이 아니라(<GlobalStyle>~~</GlobalStyle>), 최 상위 컴포넌트로 전역 스타일 컴포넌트를 추가해주기만 하면 됨(<GlobalStyle />)