[ React ] styled-components의 createGlobalStyle을 통한 reset css 설정 방법

 

 

기존에 새 프로젝트를 시작하면 항상 reset.css 폴더를 만들어

css의 디자인을 reset 해주는 코드를 가져와 본문에 적용시키고

페이지를 만들기 시작했다.

 

하지만 이번에 강의를 들으면서 더욱 편하고, 깔끔하게

페이지에 reset css를 적용하는 방법을 알게 되었다.

 

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

 

우선 npm i or yarn i 를 통해

styled-reset, styled-components 를 설치해준다.

 

styled-components는 이미 예전에 많이 사용해봤기에 따로 설명은 안하겠다.

https://gggimmin-development-technology.tistory.com/27

[ React ] CSS-in-JS 방식을 통한 Component 꾸미기

 

styled-reset 패키지는 다음과 같다 

 

 

styled-reset 패키지는 브라우저 기본 스타일을 재설정하는 CSS 스타일을 제공한다.

이는 모든 브라우저에서 일관된 스타일링을 보장하는 데 도움이 된다.

createGlobalStyle 함수에서 reset 변수를 사용하면 styled-reset 패키지가 제공하는

CSS 스타일을 전역적으로 적용할 수 있다.

즉, 애플리케이션의 모든 요소에 기본 스타일이 재설정된다.

 

const GlobalStyles = createGlobalStyle`
  ${reset};
  `;

 

 

한마디로 따로 reset.css 파일을 복사해와 붙여넣어 설정할 필요없이

저 styled-components 문장 하나로 깔끔하게 

모든 요소에 기본 스타일을 적용할 수 있다.

 

function App() {
	return (
    	<>
        <GlobalStyle />
        <...다른 컴포넌트 들>
        </>
        );
}

위와 같이 App 컴포넌트 최상단에 GlobalStyle 컴포넌트를 적용해야 한다.