Reactでstyled-componentなプロジェクトに、reset.cssを導入する

最近はじめてstyled componentでCSSを書いています。

で、reset.cssを入れようと思ったのですが、もうそもそもどう入れるのかわからず。

qiita.com

を参考にやりました。

---

入れたresetは

github.com

こちら。このパッケージをnpmやyarnでインストールして、

_app.tsxで

import { createGlobalStyle } from 'styled-components'
import reset from 'styled-reset'

const GlobalStyle = createGlobalStyle`
  ${reset}
`

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <GlobalStyle />
    </>
  )
}

でいけます。参考にしたQiitaではinjectGlobalで入れてますが、

qiita.com

styled-component v4 からcreateGlobalStyleが出来たので、こちらのほうが良さそうなのでこれで入れました。