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