[React] Global Style 적용하기

사람은 역시 공부해야 하는 동물이구나 느끼면서 글을 작성하고자 한다.

styled-reset

styled-reset은 브라우저의 기본 스타일을 리셋시켜주는 node.js 패키지이다. 내가 css를 적용할려고 했는데 브라우저에 기본적으로 적용되어 있는 스타일 때문에 적용이 안 된 경우를 많이 보았을 것이다. 그 때 reset을 시켜줘야 하는데, 구글에 쳐봤을 때 리셋시켜주는 코드를 쉽게 구할 수 있다.

그러나, react에서 reset시켜주는 라이브러리가 존재한다. 이를 쓰면 원하는 스타일링을 하기 앞서 기본 세팅을 리셋해주는 것이 좋다. 또한 styled-reset을 시켜주는 가장 큰 이유는 크로스 브라우징 때문이다.

 ✅ 브라우저마다 HTML 시맨틱 태그에 대한 기본값의 차이를 없애주기 위함이다.

반응형

styled-reset 설치하기

npm install styled-reset

styled-reset 적용하기

GlobalStyles 컴포넌트의 맨 앞에 **${reset}**을 추가한다.

import * as React from 'react'
import { createGlobalStyle } from 'styled-components'
import reset from 'styled-reset'

const GlobalStyle = createGlobalStyle`
  ${reset}
  /* other styles */
`const App = () => (
  <React.Fragment>
    <GlobalStyle />
    <div>Hi, I'm an app!</div>
  </React.Fragment>
}

export default App

import * as React from 'react'
import { Reset } from 'styled-reset'

const App = () => (
  <React.Fragment>
    <Reset />
    <div>Hi, I'm an app!</div>
  </React.Fragment>
)

👇🏻 참고

https://velog.io/@yeonjiyooo_/React-Global-Style-적용하기