When I use menuPortalTarget it breaks the styling on my dropdown. Here is a codesandbox showing the problem. In the codesandbox I have a button to toggle menuPortalTarget. When menuPortalTarget is active and you open the dropdown you can see the messed up styling vs when its not active.

I tried playing around with the parent styling and the menuPortal styling but I couldn't get it working.

This example is based off this from the react-select docs.

When I use menuPortalTarget it breaks the styling on my dropdown. Here is a codesandbox showing the problem. In the codesandbox I have a button to toggle menuPortalTarget. When menuPortalTarget is active and you open the dropdown you can see the messed up styling vs when its not active.

I tried playing around with the parent styling and the menuPortal styling but I couldn't get it working.

This example is based off this from the react-select docs.

• javascript
• reactjs
• react-select

• Facing similar issue too. This worked for me enter link description here. – Shrey Marwaha Commented Sep 23, 2022 at 22:22

2 Answers 2

You can try this

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)" })
};

What worked for me:

<Select menuPosition="fixed" />