Reactで意図せず縦スクロールバーが表示されるときの対応

この記事は公開から1年以上経過しています。

React(HTML)で高さを100vhにしたときに意図せず縦スクロールバーが表示される問題の対応策。

原因

ブラウザ既定のCSS(user agent stylesheet)でマージンが設定されているため。

デフォルトCSSのmarginを明示的にオーバーライドする。

body {
  margin: 0;
  overflow-y:hidden; // 必要に応じて
}

以上です。