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

Question

我希望在我的react select组件中添加一个蓝色背景并为向下箭头图标上色。但是，我似乎找不到正确的方法来定位要在选择看起来像现在的时候更改的选择部分。...

我希望它更像.....

我的代码当前是...

  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。 Documentation也提供了一些示例。