React Material UI中的下拉菜单项

问题描述

我的React应用程序的Dialog2中有一个cd ios && pod repo update && cd .. && Flutter clean && Flutter pub get。我在显示MenuItem时遇到问题。我已经放置了一个高于两个对话框的MenuItem。它怎么不出现在前面。它仍然隐藏在对话框的背面吗？

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

zIndex: 1900

解决方法

您必须定位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>