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

Answer 1

如果有人正在寻找更改文本和样式

<Select 
options={options} 
placeholder={<div className="select-placeholder-text">Select category</div>} 
/>

在样式表中

.select-placeholder-text {
color: pink;
}

Answer 2

我也碰到了这个。我一直尝试在CSS中更改::placeholder，但它似乎是作为实际文本呈现的，而不是伪类。这是我发现有效的方法。首先，将prop classNamePrefix="react-select"传递给组件，然后使用以下命令在CSS中选择它：

.react-select__placeholder {
  color: black;
}

（当然，您可以根据需要设置classNamePrefix。）

Answer 3

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

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

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

Answer 4

另一个选择是覆盖默认主题。根据{{​​3}}文档，占位符颜色的中性50响应。例如：

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

在react-select上查看