使用react select库遇z-index层级冲突导致下拉选项无法选中如何解决？

API 探路者

2026-10-3

问题根因

你遇到的问题核心源于错误的z-index: -1配置：

给Select组件所在的父容器设置负数z-index，会让整个容器的层级低于页面默认根层级，哪怕下拉菜单通过portal挂载到body并设置了极高的z-index，触发下拉的输入框本身位于低层级容器中，点击事件会被上层元素拦截，自然无法选中下拉选项
你没有给设置z-index的容器配置非static的position属性，z-index规则本身不会生效，反而会导致层叠上下文更加混乱

解决步骤

首先删除Styled组件中错误的z-index: -1配置，这是导致交互失效的核心原因
如果你最初的需求是解决Select输入框本身遮挡其他元素的问题，不要通过压低Select层级实现，而是给被遮挡的元素添加position: relative和比Select更高的z-index即可
调整Select所在容器的层级配置，确保其层级低于需要显示在它上方的元素，高于需要被它遮挡的元素，同时必须配套设置position属性
你现有的menuPortalTarget和menuPortal的z-index配置是正确的，不需要修改

修正后的代码示例

// 修正后的Styled组件代码
export const StoreInputBox = styled.div`
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
&:nth-child(2){
  >div{
    position: relative;
    z-index: 10; // 按需调整数值，比要显示在Select上方的元素低即可
    >div{
      border : 3px solid yellow;
      >div{
        border : 2px solid magenta;
      }
    }
  }
}
`

// JSX代码无需修改，原有portal配置可以正常生效
<StoreInputBox>
  <label> </label>
  <Select
     required
     menuPortalTarget={document.body} 
     styles={{ menuPortal: base => ({ ...base, zIndex: 99999 }) }}
     className = 'category-selection'
     options = {selectCategory}
     onChange = {(e)=>changeCategoryHandler(e)}
 />