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

Answer 2

在反应中，有一种方法可以通过“ classname”参数在JSX内部动态设置组件样式 f.e. CSS：

.foo { color: grey;}

.bar { color: black;}

然后在React中：

....
import styles from './styles'; // your css file

<div className={classNames({[styles.foo]: true, [styles.bar]: 
true})}>
  your text...
</div>

因此您可以动态更改这些样式的用法

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

2 个答案: