react style-component global reset css

리엑트에서 브라우저의 기본 CSS속성을 리셋하는 방법

 

사용 라이브러리

react

styled-components

styled-reset

 

파일 구성

src/style/global/index.js

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

const GlobalStyles = createGlobalStyle`${reset}`;

export default GlobalStyles;

src/App.jsx

import GlobalStyles from "style/global";

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

export default App;

 

정리

styled-component의 createGlobalStyle 함수를 사용한다.

리엑트는 컴포넌트 기반으로 속성을 구성하기에 모든 컴포넌트에 공통으로 적용할 속성을 적용하기 위해서는 Global 속성을 적용할 수 있도록 별도의 구성이 필요하다.

하지만 styled-components에서는 createGlobalStyle 함수를 사용하여, 애플리케이션 범위의 CSS 속성을 적용시켜 준다.

여기서는 styled-reset 라이브러리를 활용하여 브라우저의 기본 CSS를 초기화하고 있다.