我如何才能在上方（它的Z索引）ExpansionPanel上下拉react-select的下拉菜单？

Question

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

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

Answer 1

在所有“选择”标签中添加这些粗体行

<Select ......

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

...... />

Answer 2

我搜索了很多资源，并尝试了许多方法（例如z-index，溢出，位置等），但没有一种有效。终于我在这个链接上找到了答案： enter link description here

这是对我有用的答案：

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

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

Answer 3

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

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

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

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

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