Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

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

The portal rendered in document.body has closest human-readable className Select__menu: screenshot 2018-08-08 18 28 08

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! 👍

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:25
  • Comments:13 (2 by maintainers)

github_iconTop GitHub Comments

crathgebcommented, Dec 26, 2019

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: image

Methuselah96commented, Dec 21, 2020

Yeah, I don’t see any reason why MenuPlacer shouldn’t have the typical classname prop. I made a separate PR for that ( since I’m not sure that it fits in with the existing refactor PR that @ebonow referenced (

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to style react-select options - css - Stack Overflow
react select v2 (update). This new version introduces a new styles-api and some other major changes. Custom Styles.
Read more >
Solving the React Error: Not Picking Up CSS Style | Pluralsight
In this guide, you will learn about the errors that can occur while importing a CSS file into your React file.
Read more >
How To Style Common Form Elements with CSS - DigitalOcean
This tutorial covers the creation and styling of a web form that requests various data from the user. The form will use text...
Read more >
How to Troubleshoot CSS Not Working - WPForms
Have you added custom CSS for your forms, but not been able to see it come through? Here's how to troubleshoot when your...
Read more >
chakra-react-select - npm
This key applies to the MenuPortal element which is only used when the menuPortalTarget prop is passed in. This component is replaceable, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found