如何使用 select 属性更改 TextField 的 MUI 菜单弹出框的背景颜色？

Question

我想实现弹出框分别是具有“选择”属性的TextField的菜单更改背景颜色。 我按照MUI 定制文档的说明进行操作。 我成功地使用以下代码更改了文本的颜色和文本字段的TextField 。

const useStyles = makeStyles({
  root: {
    color: "azure",
    '& .MuiInputLabel-root': { color: "#adadad",}
  }
})

const TextFieldBar = (props) => {
  const classes = useStyles();
  return (
    <Stack className={classes.root} >
      <TextField
        select
      >
        <MenuItem>
          Option 1
        </MenuItem>
        <MenuItem>
          Option 2
        </MenuItem>
        <MenuItem>
          Option 3
        </MenuItem>
      </TextField>
    </Stack>
  )
}

但是当您单击Select组件时尝试更改弹出框的任何内容时，我会卡住。 我必须提到，它不完全是 Select 组件，因为我使用的是具有“选择”属性的TextField 。 所以我的问题是，我应该使用哪个 class 来更改背景。 我检查了 html 元素并尝试了所有应用的类，如下面的片段，但没有成功。

const useStyles = makeStyles({
  root: {
    '& .MuiPaper-root': {background: 'black'}; //doesn't work
    '& .MuiPaper-rounded': {background: 'black'}; //doesn't work
    '& .MuiPaper-elevation': {background: 'black'}; //doesn't work
    .
    .
    .
  }
})

我认为我还不了解自定义 MUI 组件背后的系统。 这只是一个猜测，但也许我无法到达 html 元素，因为弹出框/菜单不是我应用自定义 styles 的 Stack 或 TextField 组件的子项。

我在用着

• 反应 17.0.2
• mui-core 5.0.0-alpha.47
• @mui/材料 5.0.3
• @mui/样式 5.0.1

提前致谢。

Answer 1

Paper不在 DOM 树中的Select内，默认情况下它使用portal来显示菜单列表，因此，除非使用MenuProps.disablePortal否则无法定位降序类名称。 为了克服这个问题，MUI 提供了MenuProps因此您可以将道具传递给Paper包括className ：

<TextField
  select
  label="Select"
  SelectProps={{
    MenuProps: {
      PaperProps: {
        className: classes.paper
      }
    }
  }}

由于您使用的是v5 ，您还可以使用sx道具。 请注意，MUI 团队不建议使用makeStyles因为它已被弃用并且可能在未来版本中被删除：

<TextField
  select
  label="Select"
  SelectProps={{
    MenuProps: {
      PaperProps: {
        sx: {
          backgroundColor: "pink",
          color: "red"
        }
      }
    }
  }}

Answer 2

使用classes或emotion styled而不是makeStyles

菜单文档MenuItem 文档

课程：

<MenuItem
    classes={{...}}
>
    ...
</MenuItem>

Answer 3

你可以使用全局样式来实现这个东西

对于梅 V4。

const darkTheme = createTheme({
  overrides: {
    MuiMenu: {
      paper: {
        background: "none !important",
        backdropFilter: "blur(10px) !important",
      },
    },
  },
  palette: {
    type: "dark",
  },
});

对于梅 V5。

const darkTheme = createTheme({
  components: {
    MuiMenu: {
      styleOverrides: {
        paper: {
          background: "none !important",
          backdropFilter: "blur(10px) !important",
        },
      },
    },
  },
  palette: {
    type: "dark",
  },
});