#gatsbyビルド時にmaterial-uiのスタイルが崩れてしまった
gatsbyで開発したwebアプリをリリースしたらmaterial-uiで構成したコンポーネントのスタイルが崩れていました。どうやらプラグインを入れないとmaterial-uiのスタイルが崩れてしまうようです。
修正法がわかったので、共有しようと思います。
#スタイル崩れの修正法
1、gatsby-plugin-material-uiをインストール
npm install gatsby-plugin-material-ui @material-ui/styles
もしくは
package.jsonに以下のようにgatsby-plugin-material-uiを加える
その後、npm install
を実行
2、gatsby-config.jsにgatsby-plugin-material-uiプラグインの情報を入力する必要がある
gatsby-config.jsに以下のようにgatsby-plugin-material-uiを加える
これで、再ビルドするとmaterial-uiのcssなどのスタイルが整った。
gatsby develop
で立ち上がる開発環境でスタイルが崩れてない人もgatsby serve
でビルド時の(本番)環境が立ち上がるのでリリース前には試しておいたほうがいいと思います。