[material-ui] Styles does not apply in same order

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/nifty-night-37fimk?file=/src/App.tsx

Steps:

1. Customize e.g. TextField background (filled variant) by adding & .MuiFilledInput-root { background: "white" }
2. Check how it render and how hover/focus behave (hover and focus from Mui override our custom background white) (Screen 1)
3. Now add original Mui TextField before the customized one and refresh page. Now check how the hover/active behave (hover and focus from Mui now DOES NOT override our custom background white - our custom style has higher priority than before) (Screen 2)

Screen 1:

Screen 2:

Current behavior 😯

Custom styled element does not always looks the same.

Expected behavior 🤔

Custom styled element should always looks the same.

Context 🔦

Want to the same styles always behave in the same way. Want styled element to be deterministic - the same style do the same thing every time.

Your environment 🌎

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
  
  Browser: Chrome 109
  
  "dependencies": {
    "@emotion/react": "11.10.5",
    "@emotion/styled": "11.10.5",
    "@mui/material": "5.11.8",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-scripts": "4.0.3"
  },