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

- bobb1213131

---

可能是 如何使用 CSS 更改 HTML5 输入框的占位符颜色？ 的重复问题。 - Fabien Greard

Answer 1

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

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

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

- Oscar Saraza

Answer 2

如果有人想要更改文本和样式

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

在样式表中

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

- ZiaUllahZia

Answer 3

另一个选择是覆盖默认主题。根据react-select文档，placeholder的颜色为neutral50。例如：

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

在codesandbox上查看。

- tdphut

Answer 4

我也遇到了这个问题。我一直试图在CSS中更改::placeholder，但似乎它被渲染为实际文本，而不是伪类。以下是我发现有效的方法。首先，将属性classNamePrefix="react-select"传递给组件，然后在CSS中选择它：

.react-select__placeholder {
  color: black;
}

（当然，您可以将classNamePrefix设置为任何您想要的内容）。

- jefferiestube

Answer 5

针对版本5.7.3，我做了以下修改：

theme={(theme) => ({
            ...theme,
            colors: {
              neutral50: "#fff",
            },
          })}

- Abdullah Belkaid