[Select] style overrides overwritten by hardcoded values

• 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 😯

With the move to using emotion MuiSelect styleOverrides are being overwritten. CodeSandbox

It looks as though it’s not emotion, rather hardcoded values that I’m not sure can be overwritten - PR change

const SelectRoot = experimentalStyled(
  'div',
  {},
  { name: 'MuiSelect', slot: 'Root', overridesResolver },
)(nativeSelectRootStyles, {
  [`&.${selectClasses.selectMenu}`]: {
    height: 'auto', // Resets for multiple select with chips
    minHeight: '1.4375em', // Required for select\text-field height consistency
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
  },
});

Expected Behavior 🤔

MuiSelect styleOverrides in theme should be applied. CodeSandbox

Without adding any style overrides we get the following CSS

.MuiSelect-selectMenu {
    height: auto;
    overflow: hidden;
    min-height: 1.4375em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

adding in the following style overrides

const theme = createMuiTheme({
  components: {
    MuiSelect: {
      defaultProps: {
        displayEmpty: true,
        variant: "outlined"
      },
      styleOverrides: {
        selectMenu: {
          height: "auto",
          minHeight: "32px"
        }
      }
    }
  }
});

changes the CSS to

.MuiSelect-selectMenu {
    height: auto;
    overflow: hidden;
    min-height: 32px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

as expected.

Steps to Reproduce 🕹

Steps:

See CodeSandbox links

Context 🔦

Our Select styles are not being applied to our component

Your Environment 🌎

`npx @material-ui/envinfo`

System:
    OS: macOS 11.2.1
  Binaries:
    Node: 15.2.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.0.10 - /usr/local/bin/npm
  Browsers:
    Chrome: 89.0.4389.128. <-----
    Edge: Not Found
    Firefox: 87.0
    Safari: 14.0.3

[izakfilmalter]

Not to resurrect an issue that is probably resolved, but I can’t seem to figure out how to change the height of the Select in MUI 5. I have the following in my theme:

    MuiSelect: {
      styleOverrides: {
        select: {
          minHeight: 24,
        },
      },
    },

I can’t seem to get that style, or frankly any style within the the styleOverrieds of Select to work.

[hutber]

I actually get an TS error:

Compiled with problems:X

ERROR in src/theme/index.ts:76:3

TS2322: Type '{ MuiTabs: { styleOverrides: { root: { color: string; }; }; }; MuiSelect: { styleOverrides: { root: { "& .Mui-focused": {}; }; }; }; MuiButton: { styleOverrides: { root: { fontStyle: string; fontSize: number; fontWeight: number; ... 4 more ...; "&.Mui-disabled": { ...; }; }; ... 8 more ...; sizeLarge: { ...; }; }; v...' is not assignable to type 'Components<BaseTheme>'.
  The types of 'MuiSelect.styleOverrides' are incompatible between these types.
    Type '{ root: { "& .Mui-focused": {}; }; }' has no properties in common with type 'Partial<OverridesStyleRules<keyof SelectClasses, "MuiSelect", BaseTheme>>'.
    74 |   palette,
    75 |   breakpoints,
  > 76 |   components: {
       |   ^^^^^^^^^^
    77 |     MuiCssBaseline: {
    78 |       styleOverrides: {
    79 |         "*": {