How to fix styling on react-select dropdown when using menuPortalTarget

Question

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.

Answer 1

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