zIndex on document.body (dropdown)

Is there a way that we can assign a class inside menu container? Currently I used below code to open dropdown and attach to body.

menuPortalTarget={document.body}

the problem for this is the init div (dropdown) z-index is 1 by default and class name default is something css-*(randomly). I wonder that I can just assign my own class something similar like classNamePrefix ?

The issue now is dropdown menu is hidden on modal popup. I was trying to change the zIndex but have no solution yet.

Please advise, thanks

[ZackKnopp]

From their example of portalling you can pass styles to the menuPortal component, see here

styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}

Full component example:

<Select
  defaultValue={colourOptions[0]}
  isClearable
  styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
  menuPortalTarget={document.body}
  isSearchable
  name="color"
  menuPosition={isFixed ? 'fixed' : 'absolute'}
  menuPlacement={portalPlacement}
  options={colourOptions}
/>

[folkjc]

const customStyles = {
            container: (base, state) => {
                return ({
                    ...base,
                    zIndex: state.isFocused ? "999" : "1"  //Only when current state focused
                })
            }
        }

return <Select 
   styles={customStyles}
/>

Since we only need the zIndex to be high when the component is focused, use a conditional styling for the container. Otherwise if you happen to have multiple <Select /> components (or other components requiring a high zIndex) it might cause problems if all of them have the same 999 zIndex.