使用 CSS 在 React 选择中设置占位符的样式

Question

• 我是新来反应选择。
• 我正在尝试使用 css 设计占位符的样式
• 所以我在沙箱中构建了一个原型。
• 我尝试使用 css 更改占位符的颜色。
• 我将颜色设置为红色，但仍然没有覆盖
• 你能告诉我如何解决它吗？

• 下面提供我的沙箱和代码片段。

• 即使我用谷歌搜索占位符CSS，得到了这个链接，但仍然没有帮助我

https://www.w3schools.com/cssref/sel_placeholder.asp

https://codesandbox.io/s/react-codesandboxer-example-1q8nd

<Select
    defaultValue={""}
    label="Single select"
    placeholder={" Placeholder test "}
    options={flavourOptions}
    theme={theme => ({
      ...theme,
      borderRadius: 0,
      colors: {
        ...theme.colors,
        primary25: "hotpink",
        primary: "black",
        background: "red",
        color:"red",
      }
    })}
  />

Answer 1

根据react-select文档，占位符颜色的中性50 响应。

尝试这个：

<Select
  defaultValue={""}
  label="Single select"
  placeholder={" Placeholder test "}
  options={flavourOptions}
  theme={theme => ({
    ...theme,
    borderRadius: 0,
    colors: {
      ...theme.colors,
      neutral50: 'red',  // Placeholder color
    }
  })}
/>

或者您可以简单地执行以下操作：

export default () => {
  return (
    <div>
      <p>
        We see that the final rendered output is not an input box, but rather a
        set of divs with certain classes applied on them... so we just change
        the class
      </p>
      <Select
        defaultValue={""}
        label="Single select"
        placeholder="Placeholder test"
        styles={colorStyles}
        options={flavourOptions}
      />
    </div>
  );
};

const colorStyles = {
  placeholder: defaultStyles => {
    return {
      ...defaultStyles,
      color: "blue"
    };
  }
};

检查这个例子：例子