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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…