我怎样才能在上面（它是 z-index）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

我搜索了很多资源并尝试了很多方法（例如 z-index、overflow、position 等），但都没有奏效。最后我在这个链接上找到了答案： 在此处输入链接描述

这是对我有用的答案：

如果您使用的是 react-select 的 v2，您可以使用 menuPortalTarget 道具将下拉列表渲染到页脚的父容器（例如正文）中。

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

Answer 2

在您的所有选择标签中添加这些粗体线

<Select ......

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

...... />