reactjs - react-select，无法更改文本框中占位符中文本的颜色

Question

尝试将默认选择值的颜色设置为黑色，但它不起作用，我什至放了 !important 所以它会覆盖任何被它覆盖的引导颜色。感谢您提供任何帮助。

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'
/> 

标签： reactjs

Answer 1

colourStyles您可以使用相同的对象更新占位符样式。

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

您可以查看相关文档 ( https://react-select.com/styles#style-object ) 以检查可用于样式的键。