Chakra UIを導入したらボタンの見た目が消えた？ブラウザの「デフォルトスタイル」とリセットCSSの存在を知った話

はじめに

Chakra UIを使い始めようと思ったら変なことが起きました。

問題

<App/>を<Provider>で囲んだら、buttonやinputのスタイルが変わってしまった。スタイリングの変更はしていないのに、、、
buttonにもinputにもCSSは何も設定していません。

【Providerで囲む前】

【Providerで囲んだ後】

解決方法

以下のようなスタイルを設定したら直りました。

const buttonStyle = {
  appearance: 'auto',
  textRendering: 'auto',
  color: 'buttontext',
  letterSpacing: 'normal',
  wordSpacing: 'normal',
  lineHeight: 'normal',
  textTransform: 'none',
  textIndent: '0px',
  textShadow: 'none',
  display: 'inline-block',
  textAlign: 'center',
  cursor: 'default',
  boxSizing: 'border-box',
  backgroundColor: 'buttonface',
  margin: '0em',
  paddingBlock: '1px',
  paddingInline: '6px',
  borderWidth: '2px',
  borderStyle: 'outset',
  borderColor: 'buttonborder',
  borderImage: 'initial',
};

<button style={buttonStyle} onClick={handleClick}>登録</button>

【上記のスタイルを登録ボタンにあてた後】

なんか線が太いけど大体元通りです。

原因

ブラウザのデフォルトスタイルシートがProvider（preflight.js）によって上書きされていることが原因でした。
なので、ボタンのデフォルトスタイルを開発者ツールからコピーして設定したら元のスタイルになりました。（線が太いのとかは一部コピー漏れしたスタイルがあったかも？）

おわりに

ブラウザにデフォルトスタイルシートがあることを初めて知りました。今までHTMLだけだと思っていたUIはすでに最低限のスタイルがブラウザによって与えられたものでした。
ちなみにブラウザごとのCSSの差異をなくすためのリセットCSSも今回初めて知りました、、

今後はChakra UIでスタイルを調整していきたいです！