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

Posted 2023-02-22

【中文标题】如何使用选择属性更改 TextField 的 MUI 菜单弹出框的背景颜色？

【英文标题】：How to change the background color of MUI Menu Popover of TextField with select property?

【发布时间】：2021-12-04 11:37:29

【问题描述】：

我想实现弹出框分别是具有“选择”属性的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 元素并尝试了所有应用的类，如以下 sn-p，但没有成功。

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

提前致谢。

【问题讨论】：

“它不完全是一个 Select 组件，因为我使用的是带有 'select' 属性的 TextField” - TextField 和 select 基本上是一个 Select behind the scene。

【参考方案1】：

Paper 不在 DOM 树中的Select 内，默认使用portal 显示菜单列表，因此，除非使用MenuProps.disablePortal，否则无法定位降序类名。为了克服这个问题，MUI 提供了MenuProps，因此您可以将道具传递给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"
        
      
    
  

【讨论】：

非常感谢您的回答和 CodeSandbox 上的示例。由于我很确定您的代码一定是正确的，并且在我的情况下您的代码仍然无法正常工作，因此我搜索了另一个原因。长话短说：这是 MUI 的 alpha 版本。重新安装当前版本的 MUI 后，它现在可以工作了。

我玩过两者并注意到，第一个使用classes.paper 在第一次渲染时工作，在重新加载页面后它会回到初始 MUI 样式。第二个，使用 sx 属性即使在重新加载后也有效。感谢您提及弃用 makeStyles。你会推荐使用classes 而不是makeStyles 吗？

@marco 我不确定您在classes 和makeStyles 之间选择是什么意思，makeStyles/withStyles 已弃用，这些 API 的输出是您可以使用的类名传入className 或classes 道具。新的 API styled/sx 不再公开类名。

@marco 它可能无法按预期工作，因为 v4 和 v5 添加了相同的 MUI 类选择器，但在后台使用 different styling libraries，因此您应该将样式完全迁移到 v5 以防止错误喜欢this。

【参考方案2】：

使用classes 或emotion styled 代替makeStyles

Menu Docs MenuItem Docs

类：

<MenuItem
    classes=...
>
    ...
</MenuItem>

【讨论】：

在 MenuItem 中也使用selected

感谢您的回答。完美运行。不错的选择。

好的，请接受:)

对不起，另一个答案首先出现，已经解决了我的问题，并且更接近我想要使用组件的方式。