How to change the colour of ReactSelect component? - css

Question

Hello I am using the React select component, import ReactSelect, {ValueType} from 'react-select';
Currently my component looks like this:
This is the code for it:
<div>
<ReactSelect
className='react-select react-select-top'
classNamePrefix='react-select'
id='displayLanguage'
menuIsOpen={this.state.openMenu}
menuPortalTarget={document.body}
options={timeOptions}
clearable={false}
onChange={this.onChange}
onKeyDown={this.handleKeyDown}
value={this.state.selectedOption}
onMenuClose={this.handleMenuClose}
onMenuOpen={this.handleMenuOpen}
aria-labelledby='changeInterfaceLanguageLabel'
isDisabled={false}
/>
</div>
I want to change the colour of it to grey to look more like this but I am not sure how to:

Answer 1

Try this out,
found here https://react-select.com/styles
const customStyles = {
option: (provided, state) => ({
...provided,
borderBottom: '1px dotted pink',
color: grey,
padding: 20,
}),
control: () => ({
// none of react-select's styles are passed to <Control />
width: 200,
}),
singleValue: (provided, state) => {
const opacity = state.isDisabled ? 0.5 : 1;
const transition = 'opacity 300ms';
return { ...provided, opacity, transition };
}
}
const App = () => (
<Select
styles={customStyles}
options={...}
/>
);

Answer 2

React-select has a prop styles where you set an object that has a list of predefined properties for styling.
You can find more info here: https://react-select.com/styles
But to makes this more easy for you, in your situation you would write something like this.
<ReactSelect
className='react-select react-select-top'
classNamePrefix='react-select'
id='displayLanguage'
menuIsOpen={this.state.openMenu}
menuPortalTarget={document.body}
options={timeOptions}
clearable={false}
onChange={this.onChange}
onKeyDown={this.handleKeyDown}
value={this.state.selectedOption}
onMenuClose={this.handleMenuClose}
onMenuOpen={this.handleMenuOpen}
aria-labelledby='changeInterfaceLanguageLabel'
isDisabled={false}
styles={{
control: (styles) => ({
...styles,
background: '#eee'
})
}}
/>