how to style to react select with Styled Component in easy way

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 ( <Flex width={1} px={2} color='000' bg='white' alignItems='center' > <Select value={selectedOption} onChange={this.handleChange} options={options} />
</Flex> ) } }

export default Header;`

• 

[c4bo3l]

@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 = <Select classNamePrefix={‘Select’}>…</Select>; 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.

[cutterbl]

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.