如何修改带select属性的MUI TextField的弹出菜单Popover背景色

你之前尝试失败的核心原因是MUI Select组件弹出的菜单默认挂载在全局body节点下，不属于当前组件的DOM子树，所以组件内部的后代选择器无法匹配到对应的Popover Paper元素。

解决方案 #

方案1：透传Props自定义单组件菜单样式（推荐，适合单次自定义场景） #

你可以通过TextField的SelectProps属性透传配置到内部的Select组件，直接指定弹出菜单的Paper样式：
首先修改样式定义：

const useStyles = makeStyles({
  root: {
    color: "azure",
    '& .MuiInputLabel-root': { color: "#adadad",}
  },
  // 定义弹出菜单的背景样式
  selectMenuPaper: {
    backgroundColor: 'black',
    // 可额外加其他样式，比如文字颜色、圆角等
    color: 'azure',
  }
})

然后修改TextField组件配置：

const TextFieldBar = (props) => {
  const classes = useStyles();
  return (
    <Stack className={classes.root} >
      <TextField
        select
        // 新增透传配置
        SelectProps={{
          MenuProps: {
            PaperProps: {
              className: classes.selectMenuPaper
            }
          }
        }}
      >
        <MenuItem>Option 1</MenuItem>
        <MenuItem>Option 2</MenuItem>
        <MenuItem>Option 3</MenuItem>
      </TextField>
    </Stack>
  )
}

如果需要修改菜单项的悬浮、选中样式，可以额外定义样式类绑定到MenuItem组件上：

// useStyles中新增
menuItem: {
  '&:hover': {
    backgroundColor: '#2a2a2a'
  },
  '&.Mui-selected': {
    backgroundColor: '#3d3d3d'
  }
}

<MenuItem className={classes.menuItem}>Option 1</MenuItem>

方案2：全局主题定制（适合全站统一修改Select菜单样式） #

如果项目中所有带Select的TextField都需要统一的菜单样式，可以在主题配置中修改默认样式：

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

const theme = createTheme({
  components: {
    MuiMenu: {
      styleOverrides: {
        paper: {
          backgroundColor: 'black',
          color: 'azure'
        }
      }
    }
  }
});

// 然后用ThemeProvider包裹根组件即可

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