如何在 react-select 下拉菜单中更改 zIndex答案

【问题标题】：How to change zIndex in react-select drowpdown如何在 react-select 下拉菜单中更改 zIndex
【发布时间】：2019-04-24 13:07:23
【问题描述】：

我正在使用 react-select 库来创建自动完成下拉菜单。如果第二个有一些数据，我已经使用了 2 个并行下拉列表，并且我打开第一个，然后 zIndex 问题就来了。看图

【问题讨论】：

请添加Minimal, Complete and Verifiable example 向我们展示您到目前为止所做的工作。
非常好的问题，我今天也遇到了同样的问题！

标签： reactjs react-select

【解决方案1】：

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

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

【讨论】：

非常感谢！
拯救我的一天！它应该是最强大的解决方案。如果父容器有overflow: hidden，仅仅将menu的z-index设置为9999并不能阻止父容器裁剪的弹出窗口。
你成功了，这个解决方案适用于你有一个父 div 设置溢出：隐藏的情况。 menuPortalTarget={document.body} 成功了
这行不通，维森特的回答有效
这解决了我的问题。我在一个小对话框中打开它，但我需要它在外面。谢谢！

【解决方案2】：

试试这种设置 zIndex 的 hacky 方法，如果它有效，请告诉我 :)

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

【讨论】：

取决于@user11124592 的降价和CSS，您的解决方案是完全有效的，不需要“hacky”:)
@Vicente 感谢您的回答。如果其他人来到这里并遇到这种方法的麻烦。您可能正在使用 react-select 的门户，在这种情况下您需要使用：menuPortal: provided => ({ ...provided, zIndex: 9999 })
@Vicente，我有类似的问题，但我无法显示 zIndex。下拉菜单是否还有其他属性可以与其他组件重叠？

【解决方案3】：

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

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

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

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

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

【讨论】：

这里更正 - menuPosition={'fixed'} 应该是 menuPosition="fixed"，带双引号。
双引号或单引号都可以。这是一种风格偏好。
这真的很管用！

【解决方案4】：

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

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


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

【讨论】：

仅添加您的“customStyles”，适用于“zIndex：1000”。但要小心“工具提示”或“弹出框”并相应地添加“zIndex”

【解决方案5】：

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

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;
}

【讨论】：

【解决方案6】：

只有这些答案的组合才能在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 }),。

【讨论】：

【解决方案7】：

改变这个select的父组件的zIndex

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

【讨论】：