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

[cklaymen]

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 🌎

npx @mui/envinfo

  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"
  },

[mnajdova]

The problem comes from the overrides having the same specificity as the style added for the hover selector. There is no guarantee which one will take precedence, as the styles are defined on different elements. In practice the override would need to contain the ":hover" styles too. For having a consistent styles, there are two options:

1. define the styles for the hover styles too - this way they will always have a bigger specificity than the default background color override
2. add the style override directly on the filled input component using the sx prop, for e.g.: https://codesandbox.io/s/unruffled-flower-k08yvq?file=/src/App.tsx
3. We can add a variantMapping prop, where you can define custom filled input component, similarly to how we have in the Typography

In v6 we need to do something about this for sure.