cssreactjsmaterial-uijss

Dropdown Menu Item in React Material UI


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>

Solution

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

    Edit Nested Dialog MenuItem Dropdown (forked)