css - 更改 react-virtualized-select 中占位符的默认颜色

Question

尝试使用 input::-webkit-input-placeholder 和 singleValue 属性更改我的 react-virtualized-select 元素占位符的默认颜色，但它不起作用。我什至尝试将整个代码包装在一个主色为蓝色的自定义主题中，但它也不起作用。我希望它将其更改为文本字段占位符中的颜色。

import "react-select/dist/react-select.css";
import "react-virtualized/styles.css";
import "react-virtualized-select/styles.css";
import "material-components-web/dist/material-components-web.css";
import "./react-select.css";

import React from "react";
import ReactDOM from "react-dom";
import Select from "react-virtualized-select";
import TextField from "rmwc/TextField";

const colourStyles = {
  singleValue: styles => ({ ...styles, color: "blue" })
};

const options = Array.from(new Array(10), (_, index) => ({
  label: `Item ${index}`,
  value: index
}));

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      option: undefined
    };
  }
  render() {
    return (
      <React.Fragment>
        <Select
          className={"mdc-react-select"}
          value={this.state.option}
          onChange={option => this.setState({ option })}
          styles={colourStyles}
          options={options}
          inputRenderer={props => {
            return (
              <TextField
                {...props}
                fullwidth
                ref={undefined}
                inputRef={props.ref}
                placeholder={"Farm"}
                required
                value={
                  props.value ||
                  (this.state.option ? this.state.option.label : undefined)
                }
              />
            );
          }}
        />
        <br />
        <br />

        <div>
          <TextField
            ref={undefined}
            label={"Farm"}
            value={this.state.option ? this.state.option.label : undefined}
            style={{ width: "100%" }}
          />
        </div>


      </React.Fragment>
    );
  }
}
ReactDOM.render(<Foo />, document.getElementById("root"));

CSS:

body {
  font-family: "Roboto";
}
.mdc-react-select .Select-placeholder,
.mdc-react-select .Select-value {
  display: none;
}

.mdc-react-select .Select-control {
  background-color: transparent;
  border-color: none;
  border-radius: 0;
  border: none;
  color: #333;
  cursor: default;
  display: table;
  border-spacing: 0;
  border-collapse: separate;
  height: 36px;
  outline: none;
  overflow: hidden;
  position: relative;
  width: 100%;
  box-shadow: none !important;
}

.mdc-react-select .Select-input {
  opacity: 1 !important;
  width: 100%;
}

.mdc-text-field .mdc-line-ripple{
  background-color: rgb(23,87,170);
}

.mdc-floating-label .mdc-floating-label--float-above{
  color: rgb(23,87,170) !important;
}

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{
  color:rgb(23,87,170) !important;
}

/* .mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mdc-text-field__input:hover{
    color:rgb(23,87,170) !important;
} */
/* input::-webkit-input-placeholder {
  color: #999;
} */

Answer 1

试试这个:

.mdc-react-select .Select-input {
color: red;
}

.mdc-react-select .Select-placeholder {
color: red;
}