[React] 13. 전역 스타일 적용하기(GlobalStyle)

애플리케이션 전체에 스타일을 적용하기 싶을 때는 어떻게 해야할까요?

오늘은 styled-components 와 styled-reset 을 사용하여 전역 스타일을 적용하는 방법에 대해 정리해 보려고 합니다.

🚦 설치

먼저, 프로젝트에 styled-comonents 와 styled-reset 을 설치하여 줍니다.

npm i styled-components styled-reset

👉 필요한 이유?

styled-reset 을 사용하여 기존의 css 를 초기화해줄 거에요!

styled-comonents 를 설치하여 createGlobalStyle 를 적용합니다.

📝 파일 생성

저는 App.js 와 같은 위치에 GlobalStyles.js 라는 파일을 생성하여 다음과 같이 큰 틀을 만들ㅇ주었어요!

import {createGlobalStyle} from "styled-components";
import reset from "styled-reset";

const GlobalStyles = createGlobalStyle``;
export default GlobalStyles;

이제 우리는 GlobalStyles 안에 내용을 추가하여 스타일을 설정해볼거에요!

const GlobalStyles = createGlbalStyle`

 ${reset}
	// 아래에 전역 스타일을 추가
	a {
        text-decoration : none;
        color : inherit;
  }
	body {
	        font-family : apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell , 'Helvetica Neue', sans-serif;
	        font-size : 12px;
	        background-color : rgba(20,20,20,1);
	        color : white;
	        padding-top: 50px ;
	        overflow-x : hidden;
	}
	`;

🔑 적용

스타일을 만들어 주었다면, 마지막으로 스타일을 애플리케이션에 적용해주면 되겠죠?

저는 최상위 컴포넌트인 App.js 에 만들어준 스타일을 적용해주었어요!

import React from "react";
import RouterComponent from "./Router";
import GlobalStyles from "./GlobalStyles";

function App() {
  return (
    <div>
      <RouterComponent/>
      <GlobalStyles />
    </div>
  );
}

export default App;

🔥 마무리

오늘은 전역 스타일을 만들어 사용하는 방법에 대해 알아보았는데요. 애플리케이션에 공통되는 스타일 속성이나 css를 초기화해줄 때 간단하고 쉽게 사용할 수 있을거 같아요!