我的React應用程序的Dialog2中有一個菜單項。我在顯示菜單項時遇到問題。我已經放了一個zIndex: 1900，高于兩個dia日志。怎么不出現在正面。它仍然隱藏在對話框的背面？

請在這里檢查我的代碼沙箱: 點擊這里

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

你必須瞄準菜單彈出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>