javascript - 如何使用 select 属性更改 TextField 的 MUI Menu Popover 的背景颜色？

Question

我想实现的是，具有“select”属性的 TextField 的弹出框和菜单分别更改背景颜色。我按照 MUI customization docs 的说明进行操作.我成功地使用以下代码更改了 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 组件，因为我使用的是具有“select”属性的 TextField。所以我的问题是，我应该使用哪个类来更改背景。我检查了 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 元素，因为弹出窗口/菜单不是我在其上应用自定义样式的 Stack 或 TextField 组件的子项。

我正在使用

• 响应 17.0.2
• mui-core 5.0.0-alpha.47
• @mui/ Material 5.0.3
• @mui/styles 5.0.1

提前致谢。

Answer 1

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

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

由于您使用的是 v5，您还可以使用 sx prop .请注意，MUI 团队不建议使用 makeStyles，因为它已被弃用，可能会在未来版本中删除:

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