javascript - 如何设计 react 选择组件的箭头样式？

Question

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

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

我的代码目前...

  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}} />

您需要尝试一下，但希望您能掌握要点。如果您想知道已经应用了哪些样式，只需在调试器中自省(introspection) base 即可。 Documentation也给出了一些例子。