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:
In PROD, the HTML head
tag contains the material-ui styles in this order:
So in production, it breaks styles: material-ui own styles are overriding one another...
Some more context:
makeStyles
are not used (so I am not concerned by the https://stackoverflow.com/a/62646041/3790208 solution)generateClassName
instance and passed it to the StylesProvider
used on top the component tree (this solution had no effect)My question: how can I make sure material-ui styles are rendered the same way in development and in production ?
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