React-select: how to style to react select with Styled Component in easy way

Created on 14 Feb 2019 · 7Comments · Source: JedWatson/react-select

Below is the Code... and I want style the Select which is shown in image

`import React, {Component} from 'react';
import Select from 'react-select';
import { Box, Text, Link, Flex } from 'rebass';

const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
]

class Header extends Component {
state = {
selectedOption: null,
}
handleChange = (selectedOption) => {
this.setState({ selectedOption });
console.log(Option selected:, selectedOption);
}
render() {
const { selectedOption } = this.state;
return (
width={1}
px={2}
color='000'
bg='white'
alignItems='center'
>
value={selectedOption}
onChange={this.handleChange}
options={options}
/>

)
}
}

export default Header;`

Source

aakhan89

Most helpful comment

@aakhan89
In my case, I have to access the class name in Styled Component. To make it easier, use classNamePrefix to distinct with another react select component.
For example

const comp = ;
export default styled(comp)`
& .Select__control--is-disabled {
background-color: ${props => props.theme.background.color2} !important;
border-color: ${props => props.theme.borderColor} !important;
}

& .Select__control--is-focused {
background-color: ${props => props.theme.background.color2} !important;
border: 2px solid ${props => props.theme.background.primary} !important;
box-sizing: border-box;
}

& .Select__input {
color: ${props => props.theme.textColor};
visibility: ${props =>
!props.value ||
!isArray(props.value) ||
!props.maxSelectedItems ||
props.value.length < props.maxSelectedItems
? 'visible'
: 'hidden'};
}

& .Select__dropdown-indicator {
display: ${props =>
!props.value ||
!isArray(props.value) ||
!props.maxSelectedItems ||
props.value.length < props.maxSelectedItems
? 'flex'
: 'none'};
}

& .Select__loading-indicator {
color: ${props => props.theme.textColor};
}

& .Select__control {
background-color: ${props => props.theme.background.color2};
border-color: ${props => props.theme.borderColor};
box-sizing: border-box;
& .Select__clear-indicator {
visibility: hidden;
}
:hover {
  & .Select__clear-indicator {
    visibility: visible;
  }
}
}
'

It's not an issue, you just need to read the source code.

c4bo3l on 26 Feb 2019

👍5 👎3

What? Which component of the React-Select, exactly, are you trying to style? It really is not clear above, or I wouldn't ask.

React-Select uses EmotionJs, under the hood, and you can apply additional styling to any of it's internal components through the API. There is documentation for this on the site, it just a matter of figuring out which 'component' you're trying to style, and providing the method for it.

cutterbl on 6 Mar 2019

👍2

You can either use a custom style object as prop or even pass your own components, with any styling technique you prefer. Both approaches are very well described in the documentation
https://react-select.com/styles
https://react-select.com/components#replacing-components

haach on 3 Mar 2020

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!