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

问题描述

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

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 组件，因为我使用的是TextFieldwith 'select' 属性。所以我的问题是，我应该使用哪个类来更改背景。我检查了 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 元素，因为 popover/menu 不是我应用自定义样式的 Stack 或 TextField 组件的子项。

我在用着

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

提前致谢。

标签： javascriptreactjsmaterial-ui

Paper不在SelectDOM 树中，默认情况下它使用门户显示菜单列表，因此，除非使用MenuProps.disablePortal. 为了克服这个问题，MUI 提供了，MenuProps因此您可以将道具传递给Paper包括className：

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

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

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

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

问题描述

解决方案

推荐阅读