MuiButtonBase-root-MuiMenuItem-root ignores theme override MuiMenuItem (MUI V5.1.0)

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 

[ironpfis7]

MuiBaseButton-root styling is getting applied to menu items and switches when I open a mask. It is really bizarre. It is overriding the default styling for those components.

[TiceWise]

Thanks for your reply. I was able to reproduce the issue in a code box. The codesandbox link: https://codesandbox.io/s/mui-menuitem-height-pi8ft.

At first it looked flaky, sometimes it was working correctly, sometimes it was buggy. I was wondering if it had something to do with the styled-components, so I added that. Then by luck i noticed the screen-width triggered the @media (min-width: 600px) MuiMenuItem-root {min-height: auto}. (So i commented out the styled-component theme to have a minimal example).

One side thing; I noticed the background-color of the select is not changing. What I’m I doing wrong there?

Thanks again!

https://user-images.githubusercontent.com/46386345/142606761-607db0a6-9647-4051-9763-0ed95ae2e93d.mp4