如何修改MUI GridToolbarFilterButton选项的悬停颜色？

方法一：通过MUI主题全局定制 #

如果希望整个项目的选择器选项悬停色统一匹配主题，可以在创建主题时覆盖MenuItem的样式：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Select from '@mui/material/Select';

// 创建自定义主题，替换成公司的强调色
const theme = createTheme({
  components: {
    MuiMenuItem: {
      styleOverrides: {
        root: {
          '&:hover': {
            backgroundColor: '#FF5722', // 示例强调色，替换为你的主题色
            color: '#FFFFFF' // 可选：设置悬停时的文字颜色
          }
        }
      }
    }
  }
});

// 在根组件中包裹ThemeProvider
function App() {
  return (
    <ThemeProvider theme={theme}>
      <Select native>
        <option value="1">选项一</option>
        <option value="2">选项二</option>
        <option value="3">选项三</option>
      </Select>
    </ThemeProvider>
  );
}

方法二：局部自定义CSS类 #

仅针对单个选择器修改时，可通过自定义类名覆盖样式：

import { makeStyles } from '@mui/styles';
import Select from '@mui/material/Select';

const useStyles = makeStyles({
  hoverOption: {
    '&:hover': {
      backgroundColor: '#FF5722', // 替换为你的强调色
    }
  }
});

function CustomNativeSelect() {
  const classes = useStyles();
  return (
    <Select native>
      <option className={classes.hoverOption} value="1">选项一</option>
      <option className={classes.hoverOption} value="2">选项二</option>
    </Select>
  );
}

注意事项 #

如果使用native属性的原生选择器，部分浏览器对原生<option>的:hover样式支持有限，无法完全自定义。这种情况下建议去掉native属性，使用MUI标准的Select搭配MenuItem组件，样式可控性更强，能完美匹配主题样式。

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