在使用react-select更改为黑色时尝试更改默认占位符的颜色不起作用

Question

The text is currently grey, and hard to see, I want to make it black so it is noticeable. Whenever I change the select value it changes, but when I try to set the default color of the control text to black it doesn't do anything. My other settings work, such as backgroundColor, fontfamily works.

I am setting the placeholder value to my state when rendered.

const colourStyles = {
  control: styles => ({ ...styles, fontFamily: 'Times new roman, sans-serif !important', color: 'black',  backgroundColor: this.state.selectedOption.value || this.state.statusLiveOff, fontSize: 23,  paddingLeft: 'center', height:46})
}
<Select
   onChange={this.handleChange}
   options={optionsStatus}
   styles={colourStyles}
   placeholder= {this.state.statusColor}
 /> 

Answer 1

You can change the color of the text by changing singleValue styles in your styles object

const colourStyles = {
  control: styles => ({ ...styles, fontFamily: 'Times new roman, sans-serif !important', color: 'black',  backgroundColor: this.state.selectedOption.value || this.state.statusLiveOff, fontSize: 23,  paddingLeft: 'center', height:46}),
  singleValue: styles => ({...styles, color: 'black'})
}