Css 反应物料界面中的下拉菜单项

我在React应用程序的对话框2中有一个

菜单项。我在显示
菜单项时遇到问题。我已经放了一个比两个对话框高的
zIndex:1900
。为什么它不出现在前面呢。它仍然隐藏在对话框的背面

请检查我的代码沙盒：


{genders.map（（性别，索引）=>(
{性别}
))}
您必须瞄准
菜单
popover
z-index

const useStyles = makeStyles({
  customMenuPopover: {
    // take note of !important because default z-index is applied inline
    zIndex: "1900 !important"
  }
});

<TextField
  SelectProps={{
    MenuProps: {
      PopoverClasses: {
        root: classes.customMenuPopover
      }
    }
  }}
  variant="outlined"
  select
  label="Gender"
  fullWidth
>
  {genders.map((gender, index) => (
    <MenuItem key={index} value={gender} style={{ zIndex: 1900 }}>
      {gender}
    </MenuItem>
  ))}
</TextField>

const useStyles=makeStyles({
CustomMenuPover：{
//注意！很重要，因为默认的z索引是内联应用的
津德克斯：“1900！重要”
}
});
{genders.map（（性别，索引）=>(
{性别}
))}

您必须瞄准
菜单
popover
z-index

const useStyles = makeStyles({
  customMenuPopover: {
    // take note of !important because default z-index is applied inline
    zIndex: "1900 !important"
  }
});

<TextField
  SelectProps={{
    MenuProps: {
      PopoverClasses: {
        root: classes.customMenuPopover
      }
    }
  }}
  variant="outlined"
  select
  label="Gender"
  fullWidth
>
  {genders.map((gender, index) => (
    <MenuItem key={index} value={gender} style={{ zIndex: 1900 }}>
      {gender}
    </MenuItem>
  ))}
</TextField>

const useStyles=makeStyles({
CustomMenuPover：{
//注意！很重要，因为默认的z索引是内联应用的
津德克斯：“1900！重要”
}
});
{genders.map（（性别，索引）=>(
{性别}
))}

干得好！谢谢你干得好！非常感谢。