如何通过自定义主题修改Material UI Select/Menu MenuItem的悬浮样式

要通过你现有的自定义Material UI主题修改Select/Menu组件中MenuItem的悬浮样式，只需要在主题配置里添加overrides字段来覆盖组件的默认hover样式即可，具体操作如下：

步骤1：在自定义主题中添加overrides配置 #

在你的MyTheme配置里新增overrides属性，针对MuiMenuItem组件的根样式进行hover状态的修改。你可以直接指定固定颜色，也可以复用主题调色板中已有的颜色值：

import { createMuiTheme } from 'material-ui/styles';
export const MyTheme = createMuiTheme({
  palette: {
    primary: {
      light: '#757ce8',
      main: '#3f50b5',
      dark: '#002884',
      contrastText: '#fff',
    },
    secondary: {
      light: '#ff7961',
      main: '#f44336',
      dark: '#ba000d',
      contrastText: '#000',
    },
    error: {
      light: '#FF5F57',
      main: '#CE160C',
      dark: '#380300',
    }
  },
  // 新增overrides配置覆盖MenuItem样式
  overrides: {
    MuiMenuItem: {
      root: {
        '&:hover': {
          // 方式1：直接指定自定义颜色
          backgroundColor: '#e3f2fd',
          color: '#1976d2',
          
          // 方式2：复用主题调色板中的颜色（推荐，保持主题一致性）
          // backgroundColor: (theme) => theme.palette.primary.light,
          // color: (theme) => theme.palette.primary.contrastText
        }
      }
    }
  }
});

关键说明 #

• overrides是Material UI主题中用于全局覆盖组件默认样式的核心配置，通过MuiMenuItem这个组件标识，我们可以精准定位到MenuItem的样式。
• &:hover是CSS伪类选择器，专门用于定义元素悬浮时的样式，你可以根据需求修改backgroundColor、color、borderRadius等任意CSS属性。
• 如果你选择复用主题调色板的颜色，使用函数形式接收theme参数即可，这样能保证悬浮样式和你主题的整体风格统一。
• 这种修改是全局生效的，所有被<MuiThemeProvider theme={MyTheme}>包裹的MenuItem（包括Select下拉框里的、Menu组件里的）都会自动应用这个悬浮样式。

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