EmotionでCSSをresetする(emotion-reset)

Emotionを使用していて、イケてる感じでCSSをリセットする方法はないかなーと思い探してみました。

最初はressを使おうと思いましたが、cssをimportする必要がありcss-loaderの設定をしないといけないのでちょっと微妙でした。

そこでemotion-resetというライブラリを見つけました。

GitHub - Sayegh7/emotion-reset: Reset file for Emotion CSS-in-JS library.

元をたどるとこちらのreset-cssを参照しているようです。

GitHub - shannonmoeller/reset-css: An unmodified copy of Eric Meyer's CSS reset. PostCSS, webpack, Sass, and Less friendly.

インストール

npm i --save emotion-reset

使い方

Emotionでグローバルなスタイルを当てるにはGlobalコンポーネントを使用します。

Emotion - Global Styles

こんな感じでGlobalコンポーネントを書いてやるとリセットされます。

import emotionReset from "emotion-reset";
import { Global, css } from "@emotion/core";

...
<Global
  styles={css`
    ${emotionReset}
    li {
      list-style: none;
    }
  `}
/>
...

liタグのスタイルが残ったままだったので追記しています。