[Select] style overrides overwritten by hardcoded values #25763
Description
- 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