React Material UI 中的下拉菜单项答案

【问题标题】：Dropdown Menu Item in React Material UIReact Material UI 中的下拉菜单项
【发布时间】：2021-02-02 01:37:07
【问题描述】：

我的 React 应用程序的 Dialog2 中有一个 MenuItem。我在显示 MenuItem 时遇到问题。我已经放了一个高于两个对话框的zIndex: 1900。怎么没有出现在前面。它还隐藏在对话框的后面？

请在此处检查我的代码框： CLICK HERE

<DialogContent style={{ width: 300 }}>
  <TextField variant="outlined" select label="Gender" fullWidth>
    {genders.map((gender, index) => (
    <MenuItem key={index} value={gender} style={{ zIndex: 1900 }}>
    {gender}
    </MenuItem>
    ))}
  </TextField>
</DialogContent>

【问题讨论】：

标签： css reactjs material-ui jss react-material

【解决方案1】：

你必须定位Menu弹出框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>

【讨论】：

干得好！谢谢