使用 menuPortalTarget 时如何修复反应选择下拉菜单的样式

Question

当我使用

menuPortalTarget

时，它会破坏下拉列表中的样式。这是一个显示问题的 codesandbox。在codesandbox 中有一个按钮可以切换

menuPortalTarget

。当

menuPortalTarget

处于活动状态并且打开下拉列表时，您可以看到混乱的样式与未活动时的样式。

我尝试使用父样式和

menuPortal

样式，但我无法让它工作。

此示例基于react-select 文档中的this。

Answer 1

你可以试试这个

const selectStyles = {
  control: (provided) => ({ ...provided, minWidth: 240, margin: 8 }),
  menu: () => ({ boxShadow: "inset 0 1px 0 rgba(0, 0, 0, 0.1)" }),
  menuPortal: () => ({ zIndex: "1000", width: "240px", position: "absolute", top: "214px", backgroundColor: "white", left: "17px", boxShadow: "inset 0 1px 0 rgba(0, 0, 0, 0.1)" })
};

Answer 2

什么对我有用：

<Select menuPosition="fixed" />