如何为React Select组件样式箭头？

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

我是否朝着正确的方向前进，还是完全错了？我感觉这个问题有一个简单的解决方案，只是我还无法完全理解。

谢谢大家！

- D. West

---

尝试使用dropdownIndicator替代'图标'作为下拉按钮，使用backgroundColor替代fill。 - Kenzk447

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

- Steve -Cutter- Blades

---

非常感谢！我现在知道应该去哪里寻找实现这个的方法了。感谢你的示例！ - D. West

Answer 2

它看起来更简单，而且运行良好 :)

const colourStylesRow = {
  dropdownIndicator: styles => ({ 
    ...styles, 
    color: '#FFAE12', 
  })
}

<Select
  styles={colourStylesRow}
/>

- Назар Пелех

Answer 3

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

const customStyles = {
    dropdownIndicator: (base, state) => {
      let changes = {
        padding: 0,
      };
      return Object.assign(base, changes);
    },

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

- sachin lingwal