search

VulcanJS / Vulcan

🌋 A toolkit to quickly build apps with React, GraphQL & Meteor
http://vulcanjs.org
MIT License
7.98k stars 1.89k forks source link

Materal-ui: SSR broken if no initialWidth #2319

Open Julien-Sytadelle opened 5 years ago

Julien-Sytadelle commented 5 years ago

Hi,

When you use withWidth or conditions like theme.breakpoints.down('md') in your styles, you need to pass the intiailWidth to withWidth HOC or set it globally in you theme with props: { MuiWithWidth: { initialWidth: 'xs'}}. Doing that, it will rerender on any larger device. It could be useful to make a first guess based on user agent info. We could use react-useragent module to check for mobile, tablet or desktop then setup the props in the theme inside function getCurrentTheme of ui-material package.

I can submit a PR but I would like to know if you agree with this first.

ErikDakoda commented 5 years ago

Material UI v4.0.1 is out and we will be doubtlessly migrating to it at some point soon. In v4 they recommend migrating away from withWidth to useMediaQuery:

https://material-ui.com/components/use-media-query/#migrating-from-withwidth