Ability to customize backdrop of select and popover

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Select and popover components each generate a backdrop menu-label for select material-ui-popover-wrapper for popover They both have z-index of 1300 and i think there should be an ability to customize it in the same way you can that for other aspects of the component.

Current Behavior 😯

Inline styles are used and you have to use !important to change them. Since this is the generated div : <div role="presentation" id="menu-label" style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;">

Examples 🌈

MuiSelect: {
		root: {
			height: 34,
		},
		backdrop: {
			z-index: 1500,
		},
	},

Context 🔦

I have a select component inside a popover. Another component has a z-index: 1301 set by me so it will show over the popover backdrop. However it causes it to be on top the select backdrop as well , which is not what i need. i would like to be able to set the z-index of the backdrops to create the wanted design without using solutions like !important Thanks you

[anna-kol]

using the MenuProps helped the issue https://stackoverflow.com/questions/56831215/customize-the-z-index-of-the-react-material-ui-select-backdrop

[oliviertassinari]

@gicontz See https://material-ui.com/guides/interoperability/#portals for why it doesn’t work and how to fix it.