The green arrow is my setting min-height: 4.8rem. The red arrow is the overriding property (MuiButtonBase-root-MuiMenuItem-root min-height).
Using plain Select and MenuItem components.
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 };
Duplicates
Latest version
Current behavior 😯
I wanted to change the height of my
MenuItemsglobally 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: autoSteps to reproduce 🕹
Using plain Select and MenuItem components.
My createTheme:
Context 🔦
No response
Your environment 🌎
`npx @mui/envinfo`