如何禁用Material-UI下拉菜单（Menu）的模糊效果？

针对表单中多个下拉框打开时全屏模糊的问题，可根据你的Material-UI（MUI）版本选择以下方案：

MUI v5（当前主流版本） #

单个下拉框禁用 #

通过MenuProps给下拉菜单的背景层传递样式，直接移除模糊效果：

import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

// 组件内使用示例
<Select
  value={selectedValue}
  onChange={handleChange}
  MenuProps={{
    BackdropProps: {
      sx: {
        backdropFilter: 'none', // 移除背景模糊
        backgroundColor: 'transparent', // 可选：去掉背景半透明遮罩
      },
    },
  }}
>
  <MenuItem value="option1">选项1</MenuItem>
  <MenuItem value="option2">选项2</MenuItem>
</Select>

全局所有下拉框禁用 #

如果需要整个项目的所有下拉框都取消模糊，可在主题配置中覆盖样式：

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

const customTheme = createTheme({
  components: {
    MuiMenu: {
      styleOverrides: {
        backdrop: {
          backdropFilter: 'none',
          backgroundColor: 'transparent',
        },
      },
    },
  },
});

// 用主题包裹应用根组件
<ThemeProvider theme={customTheme}>
  <App />
</ThemeProvider>

MUI v4（旧版本） #

单个下拉框禁用 #

v4中需通过MenuProps下的ModalProps配置背景层：

import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';

// 组件内使用示例
<Select
  value={selectedValue}
  onChange={handleChange}
  MenuProps={{
    ModalProps: {
      BackdropProps: {
        style: {
          backdropFilter: 'none',
          backgroundColor: 'transparent',
        },
      },
    },
  }}
>
  <MenuItem value="option1">选项1</MenuItem>
  <MenuItem value="option2">选项2</MenuItem>
</Select>

全局所有下拉框禁用 #

在v4主题中直接覆盖MuiBackdrop的样式：

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

const customTheme = createMuiTheme({
  overrides: {
    MuiBackdrop: {
      root: {
        backdropFilter: 'none',
      },
    },
  },
});

<ThemeProvider theme={customTheme}>
  <App />
</ThemeProvider>

补充说明 #

如果只想移除模糊效果，保留轻微的背景半透明遮罩，可删除backgroundColor: 'transparent'这一行，只保留backdropFilter: 'none'即可。

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