css - How to change the colour of ReactSelect component?

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:

question from:https://stackoverflow.com/questions/65831698/how-to-change-the-colour-of-reactselect-component

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={...}
    />
  );