[Autocomplete] Flatten CSS specificity (easier overrides)

I am trying to apply custom styles for components via theme.components so that all related material ui components styles gets applied. But due to specificity issues, some are not getting overriden.

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

Current Behavior 😯

Styles applied via theme.components (of createMuiTheme) should getting overriden due to CSS specificity

Expected Behavior 🤔

Styles applied via theme.components (of createMuiTheme) should not get overriden due to CSS specificity

Steps to Reproduce 🕹

Steps:

Applied following style to AutoComplete is expected to override padding.

const theme = createMuiTheme({
  components: {
    MuiAutocomplete: {
      styleOverrides: {
        inputRoot: {
          padding: "3px"
        },
        input: {
          padding: "3px"
        }
      }
    }
  }
});

CodesanboxLink: https://codesandbox.io/s/combobox-styles-override-problem-0ngl4?file=/index.tsx

Context 🔦

Your Environment 🌎

`npx @material-ui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

[Gautam-Arora24]

Working on this 🙂

[oliviertassinari]

@mnajdova Do we really need a CSS selector of this depth .css-1n1au9f-MuiAutocomplete-root .MuiAutocomplete-inputRoot.MuiOutlinedInput-root .MuiAutocomplete-input? What about we flatten the specificity by 1 level (4 -> 3)?

diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.js b/packages/material-ui/src/Autocomplete/Autocomplete.js
index 3d92ca3fb9..ec5e00a5a6 100644
--- a/packages/material-ui/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui/src/Autocomplete/Autocomplete.js
@@ -150,18 +150,19 @@ const AutocompleteRoot = experimentalStyled(
       width: 0,
       minWidth: 30,
     },
-    '&.MuiInput-root': {
+  },
+    '& .MuiInput-root': {
       paddingBottom: 1,
       '& .MuiInput-input': {
         padding: '4px 4px 4px 0px',
       },
     },
-    '&.MuiInput-root.MuiInputBase-sizeSmall': {
+    '& .MuiInput-root.MuiInputBase-sizeSmall': {
       '& .MuiInput-input': {
         padding: '2px 4px 3px 0',
       },
     },
-    '&.MuiOutlinedInput-root': {
+    '& .MuiOutlinedInput-root': {
       padding: 9,
       [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
         paddingRight: 26 + 4 + 9,
@@ -176,13 +177,13 @@ const AutocompleteRoot = experimentalStyled(
         right: 9,
       },
     },
-    '&.MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
+    '& .MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
       padding: 6,
       [`& .${autocompleteClasses.input}`]: {
         padding: '2.5px 4px 2.5px 6px',
       },
     },
-    '&.MuiFilledInput-root': {
+    '& .MuiFilledInput-root': {
       paddingTop: 19,
       paddingLeft: 8,
       [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
@@ -198,13 +199,12 @@ const AutocompleteRoot = experimentalStyled(
         right: 9,
       },
     },
-    '&.MuiFilledInput-root.MuiInputBase-sizeSmall': {
+    '& .MuiFilledInput-root.MuiInputBase-sizeSmall': {
       paddingBottom: 1,
       '& .MuiFilledInput-input': {
         padding: '2.5px 4px',
       },
     },
-  },
   /* Styles applied to the input element. */
   [`& .${autocompleteClasses.input}`]: {
     flexGrow: 1,