4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

gatsbyビルド時に起きるmaterial-uiのスタイル崩れを直す

Last updated at Posted at 2020-01-12

#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を実行
image.png

2、gatsby-config.jsにgatsby-plugin-material-uiプラグインの情報を入力する必要がある

gatsby-config.jsに以下のようにgatsby-plugin-material-uiを加える
image.png

これで、再ビルドするとmaterial-uiのcssなどのスタイルが整った。

gatsby developで立ち上がる開発環境でスタイルが崩れてない人もgatsby serveでビルド時の(本番)環境が立ち上がるのでリリース前には試しておいたほうがいいと思います。

#参考にしたサイト
https://translate.googleusercontent.com/translate_c?depth=1&hl=ja&prev=search&rurl=translate.google.com&sl=en&sp=nmt4&u=https://github.com/mui-org/material-ui/issues/18197&xid=17259,15700022,15700186,15700191,15700256,15700259,15700262,15700265,15700271,15700283&usg=ALkJrhgdCMg8T0L8dnElpPSADj4XICpmHQ

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?