React Material UI中Dialog内MenuItem显示异常问题求助

嘿，我懂你这闹心的情况——明明给MenuItem设了更高的z-index，结果还是被Dialog死死挡住，这确实有点让人摸不着头脑。其实问题根本不在MenuItem本身，Material-UI的下拉菜单是靠Paper组件渲染的，你得给这个Paper容器设置层级才行，MenuItem的z-index再高也架不住父容器被压在下面呀！

试试这个修改方案：

<DialogContent style={{ width: 300 }}>
  <TextField
    variant="outlined"
    select
    label="Gender"
    fullWidth
    // 通过SelectProps传递下拉菜单的配置
    SelectProps={{
      MenuProps: {
        PaperProps: {
          style: {
            zIndex: 1900, // 给下拉面板设置足够高的层级
          },
        },
      },
    }}
  >
    {genders.map((gender, index) => (
      <MenuItem key={index} value={gender}>
        {gender}
      </MenuItem>
    ))}
  </TextField>
</DialogContent>

为啥这么改？ #

• Material-UI的Select组件下拉菜单是用Popper+Paper组合实现的，MenuItem只是Paper里的子元素，单独给MenuItem加z-index根本不会提升整个下拉面板的层级。
• Dialog默认的z-index是1300，你设置的1900完全足够覆盖它，但必须把这个值作用在正确的容器上。

如果改完还是有问题，可以检查下DialogContent有没有设置overflow: hidden或者overflow: auto——要是有的话，下拉菜单可能会被容器截断，这时候可以把DialogContent的overflow改成visible，或者确认MenuProps的disablePortal是默认的false（这样下拉菜单会渲染在body节点下，不会被Dialog容器限制）。

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