MuiButtonBase-root-MuiMenuItem-root ignores theme override MuiMenuItem (MUI V5.1.0) #29703
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
I wanted to change the height of my MenuItems globally through a theme override. However, there is another class still overriding the override.
The green arrow is my setting min-height: 4.8rem. The red arrow is the overriding property (MuiButtonBase-root-MuiMenuItem-root min-height).
Expected behavior 🤔
I expect my override (the green arrow) to be the top property, overriding the MuiButtonBase-root-MuiMenuItem-root min-height: auto
Steps to reproduce 🕹
Using plain Select and MenuItem components.
My createTheme:
import { createTheme } from '@mui/material/styles';
import { theme } from './main-theme';
const muiTheme = createTheme({
palette: {
primary: {
main: theme.colors.primary,
dark: theme.colors.primary,
light: theme.colors.primary,
},
},
typography: {
htmlFontSize: 10,
fontSize: 14,
fontFamily: ['"Open Sans"', '"sans-serif"'].join(','),
},
components: {
MuiTableCell: {
styleOverrides: {
root: {
fontSize: '1.6rem',
},
},
},
MuiMenuItem: {
styleOverrides: {
root: {
minHeight: '4.8rem',
},
},
},
MuiSelect: {
styleOverrides: {
root: {
fontSize: '1.6rem',
width: '100%',
backgroundColor: 'var(--color-gray-100)',
},
icon: {
color: 'var(--color-secondary)',
},
},
},
},
});
export { muiTheme };
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`
Browsers checked: Firefox developer and Safari
System:
OS: macOS 11.6
Binaries:
Node: 14.17.5 - /usr/local/opt/node@14/bin/node
Yarn: Not Found
npm: 6.14.14 - /usr/local/opt/node@14/bin/npm
Browsers:
Chrome: Not Found
Edge: Not Found
Firefox: Not Found [... actually used 95.0b7 (64-bit) Developer Edition ...]
Safari: 15.0
npmPackages:
@emotion/react: ^11.5.0 => 11.5.0
@emotion/styled: ^11.3.0 => 11.3.0
@mui/core: 5.0.0-alpha.54
@mui/icons-material: ^5.1.0 => 5.1.0
@mui/material: ^5.1.0 => 5.1.0
@mui/private-theming: 5.1.0
@mui/styled-engine: 5.1.0
@mui/styled-engine-sc: ^5.1.0 => 5.1.0
@mui/styles: ^5.1.0 => 5.1.0
@mui/system: 5.1.0
@mui/types: ^7.1.0 => 7.1.0
@mui/utils: 5.1.0
@types/react: ^17.0.11 => 17.0.11
react: 17.0.2 => 17.0.2
react-dom: 17.0.2 => 17.0.2
styled-components: ^5.3.3 => 5.3.3
typescript: ~4.3.5 => 4.3.5