Ant Design Select 与 Portal 结合时的 z-index 覆盖问题求助

问题描述 #

组件结构如下：

<Portal>
  <BigComponent>
     <Select options={[...]} />
  </BigComponent> 
</Portal>

Select组件的下拉选项会渲染在BigComponent所在div的相邻位置，但BigComponent的div为绝对定位且设置了较高z-index，导致下拉选项被覆盖。通过开发者工具给Antd生成的下拉div设置相对定位和高z-index可修复，但无法通过选择器定位该div。

解决办法 #

• 指定下拉框的渲染容器
  使用Antd Select提供的getPopupContainer属性，将下拉菜单挂载到不会被遮挡的容器中，比如页面的body：

  <Select
    options={[...]}
    getPopupContainer={() => document.body}
  />
  

  也可以指定页面中其他层级安全的容器，只需把回调函数的返回值换成目标容器的DOM节点即可。

• 直接自定义下拉框样式
  通过dropdownStyle属性直接给下拉框设置高z-index和定位属性，无需定位自动生成的div：

  <Select
    options={[...]}
    dropdownStyle={{ zIndex: 9999, position: 'relative' }}
  />
  

• 调整父组件的层级设置
  如果BigComponent的高z-index并非业务必需，可以适当降低其z-index值，或者优化内部元素的层级策略，避免覆盖下拉框。

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