我正在使用 react-select 库来创建自动完成下拉菜单。如果第二个有一些数据，我已经使用了 2 个下拉并行，然后我打开第一个，然后 zIndex 问题就出现了。看图片
如何在react选择下拉列表中更改 zIndex
IT技术
reactjs
react-select
2021-05-03 12:38:36
4个回答
在您的所有Select标签中添加这些行：
<Select
// other props
menuPortalTarget={document.body}
styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
/>
试试这种设置 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}
/>
看了半打相关问题，还没找到解决办法，终于找到了。
<Select
menuPortalTarget={document.body}
menuPosition={'fixed'}
/>
将这两个选项添加到您的 Select 组件中。
它似乎让我们了解了新的React Portal功能。
编辑：如果您执行上述操作，则由于position: fixed. 删除它可能会有所帮助。https://github.com/JedWatson/react-select/issues/4088
对我来说，解决方案是所有答案的总和（谢谢！）；
const customStyles = {
///.....
menuPortal: provided => ({ ...provided, zIndex: 9999 }),
menu: provided => ({ ...provided, zIndex: 9999 })
///.....
}
<Select
//.....
menuPortalTarget={document.body}
menuPosition={'fixed'}
styles={customStyles}
//.....
/>