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 ?

score 0 · Accepted Answer · answered Feb 19 '21 at 21:37

0

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

answered Feb 19 '21 at 21:37

amanteaux

2,063
21
24

not sure if this one is similar issue as this thread, but could you take a look on my issue? https://stackoverflow.com/questions/73796415/production-build-always-put-mui-css-at-the-top, I'm already using mui v5 – Darryl RN Sep 21 '22 at 06:49

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

1 Answers1