LoginSignup
3

More than 3 years have passed since last update.

gatsby v2でmaterial-ui v3でgatsby build (production)すると、developで綺麗に表示されていたcssが崩れる

Last updated at Posted at 2018-11-21

問題

gatsby developで問題なかった表示が gatsby build gatsby serve を経て実際に表示するとcssが総崩れする。

通常[24x24]サイズで表示されるアイコンが、親要素幅一杯のサイズになる。

import { Star as StarIcon } from '@material-ui/icons'
...
...
return <StarIcon />

cssが崩れないパターン

http://localhost:9000/http://localhost:9000/sub-directory/page
ルートからサブディレクトリを表示する場合は問題ない

cssが崩れるパターン(現状見つけてるパターン)

http://localhost:9000/sub-directory/page
直接サブディレクトリを表示するとcssが崩れる

解決方法

  1. ここにあるように、サンプルに沿ってあれこれファイルを修正していく
  2. このプラグインを追加して、<MuiThemeProvider>をLayout等から消していく

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
What you can do with signing up
3