中身が上手く表示されないことがあります。

今回、僕はReactとの相性がいいMaterial UIを使っていますが、

その際、Typographyと組み合わせて使用しましたが、ページを遷移した際は表示されますが、

該当ページに直でアクセスすると中身が空っぽになる現象に遭遇しました。

しかもPrductionのときだけです。

今回、その解決方法をご紹介します。

現象

• マークダウンの中身を取ってきて、dangerouslySetInnerHTMLにて子要素として追加する際、中身が表示されない
• Productionのときのみ
• トップページ等から遷移してきたときは、表示され、直でURLを叩いたときに表示されない
• その時でも一瞬ちらっと表示されるが、隠れてしまう

<Typography variant="body2" component="p" dangerouslySetInnerHTML={{ __html: post.html }} />

リサーチ

調べてましたがなかなか見つからず、やっとたどり着きました。 [dangerouslySetInnerHTML does not work on production builds #11108][https://github.com/gatsbyjs/gatsby/issues/11108]

• Divで囲えと？
  

意味

• 僕の書いたTypographyの要素で、componentというpropsの指定がイカンかった

Typography

解決方法

• 先程のGithubにもあった通り、親要素をDivにしないとダメということです。

  <Typography variant="body2" component="div" dangerouslySetInnerHTML={{ __html: post.html }} />

このように変更したら動きました。

まとめ

いかがでしたか？お役に立てれば幸いです！