javascript - 使用 css 在 react 选择中设置我的占位符样式

Question

• 我是 React Select 的新手。
• 我正在尝试使用 CSS 设置占位符的样式
• 所以我在沙盒中构建了一个原型(prototype)。
• 我尝试使用 CSS 更改占位符的颜色。
• 我给了红色，但还是没有覆盖
• 你能告诉我如何解决吗？

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

• 即使我在 google 上搜索占位符 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文档，占位符颜色的 neutral50 响应。

试试这个:

<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"
    };
  }
};

检查这个例子:Example