reactjs - Trying to change the colour of React Select component

Question

I am rendering a react-select component with styles. I want to change the background colour of the Select component to blue. I passed the styles onto the component but when I run my app the background colour of the component does not change:

here are my styles:

const reactStyles = {
    menuPortal: (provided: React.CSSProperties) => ({
        ...provided,
        zIndex: 9999,
    }),
    control: (styles:React.CSSProperties) => ({ ...styles, backgroundColor: 'blue' }),
};

This is the component that I am rendering:

<div>
    <Select
        className='react-select react-select-top'
        classNamePrefix='react-select'
        id='displayLanguage'
        menuIsOpen={this.state.openMenu}
        menuPortalTarget={document.body}
        styles={reactStyles}
        options={timeOptions}
        clearable={false}
        onChange={this.onChange}
        onKeyDown={this.handleKeyDown}
        value={this.state.selectedOption}
        onMenuClose={this.handleMenuClose}
        onMenuOpen={this.handleMenuOpen}
        aria-labelledby='changeInterfaceLanguageLabel'
        isDisabled={useAutomaticTimezone}
    />
</div>

question from:https://stackoverflow.com/questions/65850284/trying-to-change-the-colour-of-react-select-component

Answer 1

Waitting for answers