styled-components: Unable to style react-select component with styled-components v6

Environment

## System:
 - OS: macOS 13.4.1
 - CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
 - Memory: 17.73 MB / 16.00 GB
 - Shell: 5.9 - /bin/zsh
## Binaries:
 - Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
 - Yarn: 1.22.19 - ~/.yarn/bin/yarn
 - npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
 - Watchman: 2023.07.03.00 - /usr/local/bin/watchman
## npmPackages:
 - babel-plugin-styled-components: ^1.13.2 => 1.13.3
 - styled-components: ^6.0.2 => 6.0.2

Reproduction

https://codesandbox.io/s/styled-component-with-react-select-wsd87q

Steps to reproduce

Styling a components.ValueContainer from react-select is impossible as it expects a theme prop that is removed by styled-components.

Expected Behavior

Possible to style react-select

Actual Behavior

Impossible to style react-select

About this issue

Original URL
State: open
Created a year ago
Reactions: 2
Comments: 17 (3 by maintainers)

Commits related to this issue

fix: allow passing theme prop to child if using attrs Fixed the specific scenario documented in #4074. — committed to styled-components/styled-components by quantizor 6 months ago
fix: allow passing theme prop to child if using attrs Fixed the specific scenario documented in #4074. — committed to styled-components/styled-components by quantizor 6 months ago
fix: allow passing theme prop to child if using attrs Fixed the specific scenario documented in #4074. — committed to styled-components/styled-components by quantizor 6 months ago

Most upvoted comments

A solution to recover the eaten theme prop with the defaultTheme could look like this:

import {components, defaultTheme, SingleValueProps} from "react-select";

function Inner(props: SingleValueProps) {
    return (
        <components.SingleValue theme={defaultTheme} {...props}>
            {props.children}
        </components.SingleValue>
    )
}

const SingleValue = styled(Inner)`
    // custom styling…
`;

export default SingleValue;

As I do all styling with styled-components, I don’t dependent on the integrated styling mechanism of react-select. That’s why this solution works great for me.

birmitt on Nov 16, 2023

Here’s a simple sandbox to show the issue: https://codesandbox.io/p/sandbox/eloquent-morning-gv6p4k.

As a workaround specifically for react-select with default themes, it is possible to import import { defaultTheme } from 'react-select', and then pass that property manually, but it’s not ideal.

espenh on Nov 16, 2023

This issue is fixed in 6.1.4 when using attrs to provide an alternate theme prop https://codesandbox.io/p/sandbox/styled-component-with-react-select-forked-m62nj4?file=%2Fexample.js%3A7%2C18

I don’t think we can let theme through as a normal prop without a breaking change since styled-components currently considers normal theme prop as an actual styled-components theme and not something like react-select is expecting.

quantizor on Dec 27, 2023

Hello @dogfootruler-kr , No I use the same react-select as you but I still use styled-components version 5. I tried version 6 and indeed my workaround doesn’t work anymore, we’re investigating on that at the moment among other issues we have with this new version.

CyrilQuandalle on Jul 13, 2023