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
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
Expected Behavior 🤔
MuiSelect styleOverrides in theme should be applied. CodeSandbox
Without adding any style overrides we get the following CSS
adding in the following style overrides
changes the CSS to
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`