React Material UI 中的下拉菜单项

Posted 2023-02-22

【中文标题】React Material UI 中的下拉菜单项

【英文标题】：Dropdown Menu Item in React 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>

【参考方案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>

【讨论】：

干得好！谢谢