如何在react-select drowpdown中更改zIndex

Question

我正在使用react-select库创建自动完成下拉列表。如果2nd有一些数据，我使用了2个下拉并行，并且我先打开了一个，然后出现zIndex问题。看图片

Answer 1

在你的 allSelect标签中添加这些行：

<Select 
    // other props
    menuPortalTarget={document.body} 
    styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
/>

Answer 2

看了半打相关问题，还没找到解决办法，终于找到了。

<Select
    menuPortalTarget={document.body}
    menuPosition={'fixed'} 
/>

将这两个选项添加到您的 Select 组件中。

它似乎让我们了解了新的React Portal功能。

编辑：如果您执行上述操作，则由于position: fixed. 删除它可能会有所帮助。https://github.com/JedWatson/react-select/issues/4088

Answer 3

对我来说，解决方案是所有答案的总和（谢谢！）；

 const customStyles = {
    ///.....
    menuPortal: provided => ({ ...provided, zIndex: 9999 }),
    menu: provided => ({ ...provided, zIndex: 9999 })
    ///.....
  }


 <Select
  //.....
  menuPortalTarget={document.body}
  menuPosition={'fixed'} 
  styles={customStyles}
  //.....
  />  

Answer 4

尝试使用这种设置zIndex的方法，让我知道它是否有效:)

<Select
  styles={{
    // Fixes the overlapping problem of the component
    menu: provided => ({ ...provided, zIndex: 9999 })
  }}
  value={selectedOption}
  onChange={evt => onSelectChange(evt, index)}
  options={options}
/>

Answer 5

只需添加以下两行代码即可。

 const customStyles = {
    ///.....
    menuPortal: provided => ({ ...provided, zIndex: 5 }),
   
    ///.....
  }

 <Select
  //.....
  menuPosition={'fixed'} 
  styles={customStyles}
  //.....
  />