StickyHeader Row is hindering the drop down list view - css

Question

I have made my row header, of material UI Table component, sticky using the stickyHeader attribute
<Table stickyHeader className={classes.table}></Table>
there are two drop-downs displayed above this table, these are implemented using the ReactSelect component
const DropDown = props => (
<div className={[props.divClasses, props.error ? 'error-class' : ''].join(' ')}>
<ReactSelect
{...props}
classNamePrefix="normal-select"
disabled={props.disabled ? props.disabled : false}
multi={props.multi}
placeholder={props.placeholder ? props.placeholder : 'Select'}
closeOnSelect={props.closeOnSelect}
clearable={props.clearable}
searchable={props.searchable}
options={props.options ? props.options : []}
value={props.simpleValue ? props.options.filter(
({ value }) => value === props.value) : props.value}
isLoading={props.isLoading}
className={` ${props.className ? props.className : ''}`}
onChange={option => props.onChange(props.property, props.simpleValue ? option?.value : option)}
onBlur={props.onBlur}/>
{props.error && <FormHelperText style={{ color: '#f44336' }}>{props.error}</FormHelperText>}
</div>
);
because of being sticky, the header of the table component is now corrupting the view of the drop downs
currently, I am getting,
the expected behavior is,
kindly help me in this regard.

Answer 1

The reason of this overlapping is because mui table's sticky header's default z-index value is 2 and is greater than react-select menu's default z-index value 1.
So, you need to increase z-index of react-select component's menu property to some value that is greater than 2 like this:
const customStyles = {
menu: (provided, state) => ({
...provided,
zIndex: 3
})
};
<ReactSelect
value={selectedOption}
onChange={setSelectedOption}
options={options}
styles={customStyles}
/>
You can take a look at this sandbox for a live working example of this usage.