react-select, cannot change color of text in placeholder within text box

Question

Trying to set the color of the default select value to black but it doesn't work, i even put !important so it overrides any bootstrap colors that being overwritten by it. Any help is appreciated thank you.

const colourStyles = {
      control: styles => ({ ...styles, overflow: 'hidden', color: 'black !important',backgroundColor: this.state.selectedOption.value || '#32CD32', fontSize: 23,  paddingLeft: 'center', height:46}),
      singleValue: styles => ({ ...styles, color: 'black' }),
    }
<Select
 onChange={this.handleChange}
 options={optionsStatus}
 styles={colourStyles}
 placeholder= 'Status'
/> 

Answer 1

You can update the placeholder styles using the same colourStyles object.

const colourStyles = {
    placeholder: (defaultStyles) => {
        return {
            ...defaultStyles,
            color: '#ffffff',
        }
    }
}

You can review the related documentation (https://react-select.com/styles#style-object) to check the keys available for styling.

Answer 2

Another option is to override the default theme. According to react-select docs, the neutral50 response for placeholder's color. For example:

<Select
    onChange={this.handleChange}
    options={optionsStatus}
    styles={colourStyles}
    placeholder= 'Status'
    theme={theme => ({
        ...theme,
        colors: {
            ...theme.colors,
            neutral50: '#1A1A1A',  // Placeholder color
        },
    })}
/>

View on codesandbox