React
material-ui
gatsby
jss

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


問題

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等から消していく