CSS injection order issue between dev & prod

[jankaifer]

When you import your code before material ui, production build will make materialui's styles more important and development build will make your styles more important.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The order of is different in production and development.

Expected Behavior 🤔

It should be the same.

Steps to Reproduce 🕹

Steps:

https://codesandbox.io/s/naughty-glade-mf8mq?file=/src/PaddedPaper.js
Deployed codesanbox with Vercel: https://csb-mf8mq-ahng75pjv.vercel.app/

1. Create component A with custom styles
2. import that component before material ui component B
3. use
4. Compare production and development build (in production styles from B will be more important in the development the styles of A will be more important)

Context 🔦

Just spend weekend debugging why is my production is broken and development works fine.

Your Environment 🌎

Used provided sandbox template (it has material v5 alpha but it is reproducible in v4 as well).
Browser: Brave Version 1.10.93 Chromium: 83.0.4103.106 (Official Build) (64-bit)

[oliviertassinari]

@jankaifer This is expected, the CSS injection order is dictated by the import order. In your case, it seems that something in the production resolution pipeline changes the order, maybe tree-shaking. You can find more details on #16374 (comment).

I'm not sure how we could better document it. It doesn't seem to be a frequent problem. Maybe having developers searching on the GitHub's issue history is enough 🤔