如何覆盖Material-UI Next中选中MenuItem的样式？

Hey Daniel, I get it—you’ve successfully overridden most Material-UI Select component styles using the classes prop, but the selected MenuItem’s background just won’t budge even with MuiThemeProvider. Let’s work through this together, since this is a common quirk with Material-UI’s style specificity.

1. Boost Your Theme Override’s Specificity #

More often than not, the issue is that Material-UI’s default selected styles have higher specificity than your theme override. Try either adding !important (a quick test to confirm priority is the problem) or nesting the selector to weight it more heavily:

const theme = createMuiTheme({
  overrides: {
    MuiMenuItem: {
      selected: {
        // Quick test to confirm priority
        backgroundColor: 'transparent !important',
        // Clean approach: double up the selector to increase specificity
        '&.MuiMenuItem-selected': {
          backgroundColor: 'transparent'
        }
      }
    }
  }
});

2. Skip the Theme—Target MenuItem Directly with Custom Classes #

If theme overrides aren’t cutting it, apply styles directly to MenuItem using makeStyles (or useStyles for functional components). This usually bypasses specificity conflicts entirely:

import { makeStyles } from '@material-ui/core/styles';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';

const useStyles = makeStyles({
  customSelectedItem: {
    '&.Mui-selected': {
      backgroundColor: 'transparent',
      // Optional: Keep hover behavior if you want
      '&:hover': {
        backgroundColor: 'rgba(0, 0, 0, 0.04)'
      }
    }
  }
});

class SelectMUI extends Component {
  render() {
    const classes = useStyles();
    const { className, name } = this.props;

    return (
      <Select className={className} name={name}>
        <MenuItem className={classes.customSelectedItem} value="opt1">Option 1</MenuItem>
        <MenuItem className={classes.customSelectedItem} value="opt2">Option 2</MenuItem>
      </Select>
    );
  }
}

3. Check for Nested ThemeProvider Conflicts #

If your component is wrapped inside an existing MuiThemeProvider, your custom theme might not be merging correctly. Instead of replacing the outer theme, merge your overrides into it using createMuiTheme’s second parameter:

import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
// Import your app's base theme if you have one
import baseTheme from './path-to-your-base-theme';

const customTheme = createMuiTheme(baseTheme, {
  overrides: {
    MuiMenuItem: {
      selected: {
        backgroundColor: 'transparent'
      }
    }
  }
});

4. Verify the Exact Class Name for Selected State #

Double-check the actual class name applied to the selected MenuItem using your browser’s dev tools. Depending on your Material-UI version:

• For v4: The selected class is Mui-selected
• For v5: It’s MuiMenuItem-selected (and note v5 uses createTheme instead of createMuiTheme)

If you’re on v5, adjust your theme override like this:

import { createTheme, ThemeProvider } from '@material-ui/core/styles';

const theme = createTheme({
  components: {
    MuiMenuItem: {
      styleOverrides: {
        selected: {
          backgroundColor: 'transparent'
        }
      }
    }
  }
});

Also, keep an eye on any MenuProps you’ve set on the Select component—sometimes custom menu styles can override the MenuItem’s selected state.

内容的提问来源于stack exchange，提问作者Daniel Miclos