Material UI表格粘性表头遮挡ReactSelect下拉列表问题求助

这个问题的核心是粘性定位的表头堆叠层级高于ReactSelect的下拉菜单，导致下拉选项被遮挡。可以通过以下两种方式解决：

方法一：通过ReactSelect的styles属性自定义下拉菜单层级 #

直接在DropDown组件的ReactSelect实例中，通过styles prop提升下拉菜单的z-index值（需高于Material UI粘性表头的默认层级，MUI表头默认z-index为1100，设置1300足够）：

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}
      // 添加下拉菜单层级配置
      styles={{
        menu: (provided) => ({
          ...provided,
          zIndex: 1300,
        }),
      }}
    />
    {props.error && <FormHelperText style={{ color: '#f44336' }}>{props.error}</FormHelperText>}
  </div>
);

方法二：通过全局CSS调整下拉菜单层级 #

利用你已设置的classNamePrefix="normal-select"，在全局样式文件中添加以下规则：

.normal-select__menu {
  z-index: 1300 !important;
}

原理说明 #

Material UI的stickyHeader会给表格表头设置position: sticky和默认的z-index，创建了一个独立的堆叠上下文。ReactSelect的下拉菜单默认z-index较低，无法穿透这个上下文，因此需要手动提升下拉菜单的堆叠层级，使其显示在表头上方。

内容的提问来源于stack exchange，提问作者Mueez Khan