使用 menuPortalTarget 时如何修复 react-select 下拉菜单的样式答案

【问题标题】：How to fix styling on react-select dropdown when using menuPortalTarget使用 menuPortalTarget 时如何修复 react-select 下拉菜单的样式
【发布时间】：2021-06-11 22:41:06
【问题描述】：

当我使用menuPortalTarget 时，它会破坏我的下拉菜单中的样式。这是显示问题的codesandbox。在代码框中，我有一个按钮可以切换menuPortalTarget。当menuPortalTarget 处于活动状态并打开下拉列表时，您可以看到混乱的样式与不活动时的样式。

我尝试使用父样式和 menuPortal 样式，但无法正常工作。

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

【问题讨论】：

标签： javascript reactjs react-select

【解决方案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)" })
};

【讨论】：