[React/Typescript] styled-components로 global style 적용하기

1.  패키지 설치

타입스크립트 이용 시 @types/styled-components도 설치해주세요

yarn add styled-components
yarn add -D @types/styled-components

 

2. global style 파일 생성

저는 루트(/src)디렉토리 하위에 style이라는 폴더를 생성하고
globalStyle.ts라는 파일에 아래 코드를 작성했습니다

 

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`

// 초기화 코드

`;
export default GlobalStyle;

 

3. global style 적용

index.ts 파일로 돌아와서 global style을 불러와서 적용해줍니다
저는 리액트 18버전으로 프로젝트를 생성해서 React.DOM.render가 아닌 createRoot을 사용했습니다

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import GlobalStyle from './style/globalStyle';

const root = createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
    <GlobalStyle /> // 여기!
  </React.StrictMode>
);

 

4. 결과

globa style 적용 전으로 브라우저의 기본 padding, margin이 그대로 나타남

global style에 maring과 padding값을 0으로 초기화한 결과