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

Question

我希望在我的 React select 组件中添加蓝色背景并为向下箭头图标着色。但是我似乎无法找到正确的方法来定位 select 的片段我正在寻找改变 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 也给出了一些例子。

Answer 2

非常感谢，解决了我的问题

const customStyles = {dropdownIndicator: (base, state) => { 让变化= { 填充：0， }; return Object.assign（基础，变化）； },

control: (base) => ({
  ...base,
  height: 0,
  minHeight: 28,
}),
IndicatorsContainer: (base) => ({
  ...base,
  minHeight: 1,
}),

};

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

How can I style the arrow of react select component?

javascript

user-interface

reactjs

react-select