GatsbyJS で初回表示、リロード時にスタイルが崩れる

March 04, 2022

GatsbyJS

GatsbyJS で初回表示、リロード時にスタイルが崩れるときは設定もれかも。gatsby-plugin-styled-componentsを追加で解決

GatsbyJS で

yarn start

でのプレビューは問題ないのだけれど本番環境

yarn build
yarn serve

でのプレビュー時は初回表示、リロード時に表示が崩れる現象が発生。
リンクを辿るときは正常な表示。

ページ構成としてこのような感じ


<body>
<container>
    <header></header>
    <content>
        <main></main>
        <sidebar></sidebar>
    </content>
    <footer></footer>
</container>
</body>

レスポンシブ対応としてMUI(Material-UI)の<Grid>を使っている。
表示崩れが起こるのは <main></main>の部分。

MUI(Material-UI)が悪さしていると思い原因調査でやったこと

<Grid>を無効
<box> を無効
googleAdsense コメントアウト
{children} を無効

状況変わらず。 MUI(Material-UI)は原因ではないと推測。

styled-components を疑う。

原因

設定ミス。

yarn add styled-components
yarn add @types/styled-components

だけでなく

yarn add gatsby-plugin-styled-components

も必要だった。

`gatsby-plugin-styled-components`の有効化

gatsby-config.js に追記

plugins: [
  `gatsby-plugin-styled-components`,
]

諸惑

部分的な表示崩れのため部分的な原因かと思いきや全体設定の漏れ。
ちょっと時間をとってしまった。こういうのも慣れていくしかないか・・・

原因

gatsby-plugin-styled-componentsの有効化

諸惑

`gatsby-plugin-styled-components`の有効化