Within my application, I've implemented a pop-up for inputting event data. One of the fields within this pop-up is for setting the time using the DateTimePicker from MUI.
<Popup
width={600}
height={600}
/../
>
<div className={"group"}>
<div className={"label1"}>Name</div>
<div className={"label2"}>
<FormControl>
<DesktopTimePicker
However, I've encountered an issue where the second pop-up generated by the TimePicker remains hidden behind the initial one. Despite attempting to adjust the z-index to 10000, the problem persists. The browser displays the following:
.css-1anqmj6-MuiPopper-root-MuiPickersPopper-root {
z-index: 1300;
}
.MuiPickersPopper-root {
z-index: 10000;
}
Am I unable to override this value?
Below is the CSS styling I have used:
.MuiPickersPopper-root {
z-index: 10000; !important;
}
.group {
display: flex;
margin: 0.6em;
align-items: center;
flex-direction: row;
}
.group .label1 {
display: inline-block;
width: 25%;
}
.group .label2 {
display: inline-block;
width: 75%;
}