如何更改 react-select 下拉列表中的 z 索引

Question

我正在使用 react-select 库来创建自动完成 drop-down。如果 2nd 有一些数据，我已经使用 2 drop-down parallel & 我打开第一个然后 zIndex 问题来了。看图

Answer 1

尝试这种设置 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 2

更改此select

父组件的zIndex

<div style={{zIndex:1000}}>
  <React-Select-Component/>
</div>

Answer 3

在所有 Select 标签中添加这些行：

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

Answer 4

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

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

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

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

编辑：如果您执行上述操作，则运行由于 position: fixed 而导致菜单锚定到页面的问题。删除它可能会有所帮助。 https://github.com/JedWatson/react-select/issues/4088

Answer 5

另一种方法是我们可以配置 classNamePrefix 并通过外部 class 控制它。

import Select from "react-select";

<Select
   classNamePrefix={"my-custom-react-select"}
/>

.my-custom-react-select__menu {
  z-index: 2;
}

奖金，我们可以重新设计一切

.my-custom-react-select__control {
  border-width: 1px !important;
  border-color: #cbd5e0 !important;
  padding-top: 0.16rem;
  padding-bottom: 0.16rem;
}

.my-custom-react-select__control--is-focused {
  border-color: #746df7 !important;
  box-shadow: none !important;
}

.my-custom-react-select__indicator-separator {
   display: none;
}

Answer 6

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

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


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

Answer 7

只有这些答案的组合才能在 Next.js 上为我提供有效的解决方案。 menuPortalTarget={document.body} 使用错误 ReferenceError: document is not defined 中断了应用程序，这在 SSG/SSR 上是有意义的 :)

menuPosition={"fixed"} 由@I Stand With Israel 与来自@hemant rao 的答案 的组合所建议：menuPortal: (base) => ({ ...base, zIndex: 4 }),.

Answer 8

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

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

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

如何更改 react-select 下拉列表中的 z 索引

How to change zIndex in react-select drowpdown

reactjs

react-select