我怎样才能拉出 React-select 上面的下拉菜单（它是 z-index）ExpansionPanel？

Question

我在 ExpansionPanel（material-ui 的一个组件）中使用了 react-select，它使 ExpansionPanel 成为不需要的滚动条。我该如何解决？我试图更改 z-index ，但没有用。考虑图中的第三个 select，它的下拉菜单被 ExpansionPanel 隐藏了。先感谢您。

                <Select
                   value={state.selectedPerson}
                   onChange={handleMitarbeiterChange}
                   options={state.peopleOptions}
                   textFieldProps={{
                   label: 'Mitarbeiter',
                   id: "mitarbeiter-required",
                   InputLabelProps: {
                     shrink: true,
                   },
                 }}
                />

Answer 1

我搜索了很多资源并尝试了很多方法（例如 z-index、溢出、位置……），但没有一个有效。最后我在 link 上找到了答案： enter link description here

这是对我有用的答案：

如果您使用的是 react-select 的 v2，则可以使用 menuPortalTarget 属性将下拉菜单渲染到页脚的父容器（例如正文）中。


<Select
    { ... }
    menuPortalTarget={document.querySelector('body')}
/>

Answer 2

在所有 Select 标签中添加这些粗线

<Select ......

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

...... />

Answer 3

看到半打相关问题，但没有找到解决办法，我找到了一个。

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

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

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

编辑：如果您执行上述操作，那么您运行会因菜单锚定到页面而陷入此问题。 https://github.com/JedWatson/react-select/issues/4088

我怎样才能拉出 React-select 上面的下拉菜单（它是 z-index）ExpansionPanel？

how can I pull react-select's drop-down menu above(it's z-index) ExpansionPanel?

z-index

react-select

material-ui