如何在react-select drowpdown中更改zIndex

Question

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

Answer 1

在所有Select标签中添加以下行：

<Select
......

 1. menuPortalTarget={document.body} 
 2. styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}

......
/>

Answer 2

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

reducer

Answer 3

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

看到了六个相关问题，但没有找到解决方案，我找到了一个解决方案。

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

将这两个选项添加到“选择”组件中。

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

编辑：如果执行上述操作，则菜单锚定到页面后，您会遇到此问题。 https://github.com/JedWatson/react-select/issues/4088

Answer 5

另一种方法是我们可以配置 <input type="file" name="image[]" class="form-control @error('image') is-invalid @enderror"> <button type="button" id="btn1" class="btn btn-link btn-icon mt-2"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <circle cx="12" cy="13" r="3" /> <path d="M5 7h2a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h2m9 7v7a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2" /> <line x1="15" y1="6" x2="21" y2="6" /><line x1="18" y1="3" x2="18" y2="9" /> </svg> </button> @error('image') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror 并通过外部类对其进行控制。

classNamePrefix

import Select from "react-select";

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

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

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

Answer 6

更改此选择的父级组件的zIndex

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