Dropdown Menu Item in React Material UI

Question

I have a MenuItem in my Dialog2 in my React app. I have a problem displaying the MenuItem. I already put a zIndex: 1900 that is higher than the two dialogs. How come it doesn't appear on the front. It is hiding still on the back of the dialogs?

Pls check my codesandbox here: 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

You've to target the Menu popover 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>