如何设置反应选择组件的箭头样式？

Question

我希望在我的反应选择组件中添加蓝色背景并为向下箭头图标着色。但是，我似乎无法找到正确的方法来定位我希望在选择看起来像的那一刻更改的选择部分....

我希望它更像......

我的代码目前...

  render() {
    const { selectedOption } = this.state;
    return (
      <Select
        value={selectedOption}
        styles={reactSelectStyles}
        onChange={this.passingprops}
        options={this.state.adminoptions}
      />
    );

  }
}

const reactSelectStyles = {
  icon: {
    fill: "blue"
  }
}

我是朝着正确的方向前进还是完全错过了目标？我觉得有一个简单的解决方案，我只是无法到达那里。

谢谢大家！

Answer 1

您必须覆盖dropdownIndicator.

const dropdownIndicatorStyles = (base, state) => {
  let changes = {
    // all your override styles
    backgroundColor: 'blue';
  };
  return Object.assign(base, changes);
};

<Select styles={{dropdownIndicator: dropdownIndicatorStyles}} />

你将不得不玩它一些，但希望你能明白要点。如果您想知道已经应用了哪些样式，只需base在调试器中内省即可。该文件列举了一些例子也是如此。