JedWatson / JedWatson/react-select

using Styled Components with menuPortalTarget property

Open
#5,488 1 comment 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

issue/bug-unconfirmed
Dominant language
TypeScript
Stars
28k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

Description of the issue:
when i use "react-select" in combination with "styled-components" and the property menuPortalTarget, i run into the following problem: no styles are passed for the expanded dropdown menu, this is probably because it is pinned directly to the body. Is there a workaround for this ?

Steps to reproduce the issue:

  • define an styled Component with react-select
  • overwrite classes from react-select with styled components
  • add menuPortalTarget

Expected result:
correct overwriting styles of dropdown which are attached to body or other target.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with a styled react-select, overridden classes, and menuPortalTarget as described. Inspect how the expanded dropdown is styled when attached to the body or another target. Done means the dropdown receives the expected styled-components overrides in the reproduced setup.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.