[Node.js] styled-reset 이란? / 사용법

styled-reset 이란?

styled-components와 연결되어, 여러 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.js 패키지

normalize.css와 동일한 역할

 

styled-reset 설치하기

npm i styled-reset

 

styled-reset 사용하기

//App.js

// 글로벌 스타일 만들기 위한 createGlobalStyle 불러오기
import { createGlobalStyle } from "styled-components";

// 스타일 초기화를 위한 reset 불러오기
import reset from "styled-reset";

// 글로벌 스타일 만들기, reset 사용해서 스타일 초기화하기
const GlobalStyles = createGlobalStyle`
    ${reset}
    body {
        background-color: red;
    }
`;

function App() {
  return (
    <div>
      <!-- GlobalStyles 컴포넌트가 감지되면, 모든 요소에 스타일을 적용한다 -->
      <GlobalStyles/>
    </div>
  );
}

export default App;

 

styled-components GlobalStyles prettier 적용안될때

import { createGlobalStyle } from "styled-components";

// 변수에 저장 후 꺼내서 사용하기
const styles = createGlobalStyle;

const GlobalStyles = styles.createGlobalStyle`
    body {
        background-color: red;
    }
`;

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

export default App;