如何在Material-UI中解决Select下拉选项透明难以查看的问题

下拉出现半透明效果、辨识度低，核心原因是MUI的Select弹出的下拉层本质是Paper组件，默认会叠加一层半透明渐变背景，或是主题配置的透明度规则导致视觉上发透，可以根据项目需求选以下方案解决：

方案1：单个Select局部配置（不影响全局组件） #

直接给Select传入MenuProps覆写下拉层的样式，精准修改当前组件的透明效果，修改后的代码示例：

<InputLabel id="demo-simple-select-label">Client Code</InputLabel>
<Select
  style={{ width: '100%' }}
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={formik.values.clienCode}
  onChange={formik.handleChange}
  // 新增下拉层样式配置
  MenuProps={{
    PaperProps: {
      sx: {
        // 移除默认半透明渐变背景
        backgroundImage: 'none',
        // 指定不透明的背景色，和项目主题保持一致即可
        backgroundColor: '#fff',
      },
    },
  }}
>
  <MenuItem value={10}>AB</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

说明：如果是MUI v5版本，上面的写法用sx属性更符合新API规范；如果是旧版本，直接把sx换成style属性写一样的键值对即可。

方案2：全局主题配置（项目内所有下拉统一生效） #

如果项目内多处Select都存在这个问题，直接在MUI的全局主题配置里覆写Paper组件的默认样式，不用逐个组件修改：

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

const theme = createTheme({
  components: {
    MuiPaper: {
      styleOverrides: {
        root: {
          backgroundImage: 'none', // 移除所有Paper组件默认的半透明渐变层
          // 自动适配明暗模式的背景色，不用硬写色值
          backgroundColor: (theme) => theme.palette.background.paper,
        },
      },
    },
  },
});

// 应用顶层包裹主题即可生效
// <ThemeProvider theme={theme}> 你的应用组件 </ThemeProvider>

注意事项 #

• 不要只修改背景色值，一定要加backgroundImage: 'none'配置，否则MUI默认叠加的半透明渐变层还是会让下拉看起来发透。
• 如果是深色模式场景，直接引用主题自带的palette.background.paper色值即可，不用手动写深色值，自动适配主题规则。
• 如果不想影响其他用到Paper组件的场景（比如卡片、弹窗），优先用方案1的局部配置，不要改全局样式。

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