Material-UI production build generate different styles order definition than in development

Question

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 makeStyles are 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 generateClassName instance and passed it to the StylesProvider used 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 ?

Answer 1

The solution was actually to upgrade to the v5 of Material-ui: https://next.material-ui.com/guides/migration-v4/

The root issue seemed to be related to Material-ui v4 not correctly handling tree-shaking: https://github.com/mui-org/material-ui/issues/16609