Unable to apply custom-styles for top menu-portal element via CSS

I’m using classNamePrefix="Select" prop to style inner elements from external css-file. Everything works fine, except menuPortal element. It does not receive any specific className and when used in combination with menuPortalTarget={document.body} it’s impossible to style that top element from portal via .Select__someElemName {}.

Currently only possible solution to add styles to menuPortal element is to use inline styles:

  <Select
    menuPortalTarget={document.body}
    styles={{
      menuPortal: styles => ({ ...styles, zIndex: 100 }) //  >= dialog's z-index
    }}
  />

The portal rendered in document.body has closest human-readable className Select__menu:

It would be good to have ability to add custom class-names to this menuPortal element, since it might be rendered outside of <Select/> component.

Please fix it and thanks for great job! 👍

[crathgeb]

A workaround is to add a placeholder in the dom for the react-select-portals and then to apply classes you want to it:

Then specify the portal to the portal placeholder:

[Methuselah96]

Yeah, I don’t see any reason why MenuPlacer shouldn’t have the typical classname prop. I made a separate PR for that (https://github.com/JedWatson/react-select/pull/4342) since I’m not sure that it fits in with the existing refactor PR that @ebonow referenced (https://github.com/JedWatson/react-select/pull/4333).