React 中的下拉菜单项 Material UI

Question

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

请在这里查看我的codesandbox： 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>

Answer 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>

React 中的下拉菜单项 Material UI

Dropdown Menu Item in React Material UI

css

reactjs

material-ui

jss

react-material