[react] styled components에서 global style(전역 스타일) 적용하기

styled-components

---

Global style

styled-components는 컴포넌트 스코프 뿐만 아니라 전역 스타일을 적용하는 기능도 제공합니다.

전역 스타일은 애플리케이션의 모든 컴포넌트에 영향을 미치는 CSS 규칙입니다. 이를 통해 폰트, 색상, 마진 등과 같은 기본적인 스타일을 일관되게 설정할 수 있습니다.

 

1. createGlobalStyle을 사용하여 전역 스타일을 정의하는 컴포넌트를 생성합니다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: #f8f8f8;
  }
`;

 

 

2. 생성한 GlobalStyle 컴포넌트를 루트 컴포넌트에서 랜더링합니다.

import React from 'react';
import { GlobalStyle } from './styles/GlobalStyle';

function App() {
  return (
    <>
      <GlobalStyle />
      {/* 나머지 애플리케이션 컴포넌트 */}
    </>
  );
}