css - 将所选元素的颜色更改为黑色并在 React Picky 中保持占位符的颜色为灰色

Question

对多选下拉菜单使用 react picky。尝试将占位符颜色保持为灰色，同时在选择后保持黑色。

HTML

<Picky multiple={true}
       includeFilter={true}
       onChange={this.onRulesSelectChange}
       placeholder={"Please Select"} />

在 css 中覆盖 picky 的占位符类，但它也适用于选定的文本。所以文本也会变灰。

CSS

.picky__placeholder{
    font-family: CSePRoman, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: grey;
    line-height: 21px;
}

实际

占位符 -> 灰色

选定文本 -> 灰色

预期

占位符 -> 灰色

选中的文字 -> 黑色

提前致谢!

Answer 1

您刚刚选择了类名，无论是否选择元素，该类名在元素上都保持不变。 如果您想将初始未选择的值着色为灰色，您可以这样做。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      arrayValue: []
    };
    this.onRulesSelectChange = this.onRulesSelectChange.bind(this);
  }

  //Set the updated value array in your state
  onRulesSelectChange(value) {
    this.setState({ arrayValue: value });
  }

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col">
            <h3>Multi select</h3>
            <Picky
              //Conditionally assign a class based on size values selected
              className={
                this.state.arrayValue.length > 0 ? "items-selected" : "items-not-selected"
              }
              value={this.state.arrayValue}
              options={??} //Put in your options as you did 
              multiple={true}
              includeFilter={true}
              onChange={this.onRulesSelectChange}
              placeholder={"Please Select"}
            />
          </div>
        </div>
      </div>
    );
  }
}

使用以下规则更新您的 css 文件

.not-selected span.picky__placeholder {
    color: grey
}

查看此实时代码沙箱示例:https://codesandbox.io/s/0zz0q9670