使用 css 在反应选择中设置我的占位符

Question

• 我是 react select 的新手。
• 我正在尝试使用 css 设置占位符的样式
• 所以我在沙盒中构建了一个原型。
• 我尝试使用 css 更改占位符的颜色。
• 我将颜色设为红色，但仍未覆盖
• 你能告诉我如何解决它吗？

• 在下面提供我的沙箱和代码 sn-p。

• 即使我搜索了占位符 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 docs，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

Answer 2

占位符实际上是一个 div，所以你可以通过 CSS 来设置样式：

.css-1wa3eu0-placeholder {
  color: red !important;
}

p {
  color: blue;
}

.myDiv > div:nth-child(2) > div > div > div:nth-child(1) {
  font-size: 9px;
  color: orange !important;
}

完成working example here