Question

我是新来选择的人。
我正在尝试使用CSS设置占位符的样式
所以我在沙箱中构建了一个原型。
然后我尝试使用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文档，占位符颜色的中性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"
    };
  }
};

检查以下示例：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

使用CSS在React select中设置我的占位符样式

2 个答案: