Customize the z-index of the react material ui select backdrop

user_6736422 0
Viewed 5718

I have a select component inside a popover. They both render backdrops with zindex: 1300 when opened. I also have a tag component that I want to show on top of the popover backdrop, however this causes it to be on top of the select backdrop as well. I need to set the select backdrop to a higher number, is there a way to customize it?

I have tried to change the z-index of the select itself or use the id of the backdrop to change it however it has an inline style that overrides mine and I would rather have a better solution than use !important

this is the rendered backdrop

<div role="presentation" id="menu-label" style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;">

I would like my tag to be on top of the popover backdrop but behind the select backdrop.

material-ui
1 Answers

You can set the z-index of the opening items of with MenuProps. Example:

 <Select
     MenuProps={{
         style: {zIndex: 35001}
     }}
 >
     {this.renderSelectItems()}
 </Select>`

This property doesn't seem to be documented (anymore?) but has been working for quite a while now.

user_19945790
Related