时间戳

首页 > 解决方案 > 将所选项目的颜色更改为黑色并在 React Picky 中保持占位符的颜色为灰色

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

问题描述

对多选下拉菜单使用 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;
}

实际的

占位符 -> 灰色

选定文本 -> 灰色

预期的

占位符 -> 灰色

选定文本 -> 黑色

提前致谢！

标签： cssreactjs

解决方案

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

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

推荐阅读