전역 스타일 적용하기 styled-components createGlobalStyle

이전까지는 reset.css를 index.html head 에 연결하는 방식으로 적용하였다. 

하지만 이번에 createGlobalStyle을 사용하여 전역 스타일을 적용하는 방법을 알게되어 정리해보고자 한다. 

 

createGlobalStyle은 styled-components 라이브러리를 통해 전역 스타일을 적용할 수 있다.

 

설치

npm install styled-components
또는
yarn add styled-components

 

적용

src/GlobalStyle.jsx 파일을 만든 후 

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  //스타일을 작성해주세요.
  body{
  }
`;

export default GlobalStyle;

 

 

최상위 컴포넌트에 import 

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import store from "./redux/config/configStore";
import GlobalStyle from "GlobalStyle";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
    <GlobalStyle />
  </React.StrictMode>
);