Using material-ui, the production build differs from the development one: the generated material-ui styles in production are not defined in the same order as ones from development one.
In DEV, the HTML head tag contains the material-ui styles in this order:
- MuiPaper
- MuiTouchRipple
- MuiButtonBase
- MuiButton
- [...]
In PROD, the HTML head tag contains the material-ui styles in this order:
- MuiButton
- MuiButtonBase
- MuiIcon
- MuiMenu
- [...]
So in production, it breaks styles: material-ui own styles are overriding one another...
Some more context:
- Material-ui is used in version 4.11.3
- Parcel is used to make the production build
- Custom
makeStylesare not used (so I am not concerned by the https://stackoverflow.com/a/62646041/3790208 solution) - I tried without success the solution described here: https://material-ui.com/getting-started/faq/#why-arent-my-components-rendering-correctly-in-production-builds => I created a single
generateClassNameinstance and passed it to theStylesProviderused on top the component tree (this solution had no effect) - @material-ui/styles is not used
My question: how can I make sure material-ui styles are rendered the same way in development and in production ?