如何更改箭头并在反应选择中放置一个三角形而不是三角形，以及悬停时更改颜色？

Question

如何更改箭头并在react-select中放置三角形而不是三角形，并且悬停时更改颜色？

<Select
    styles={customStyles}
    defaultValue={[colourOptions[2], colourOptions[3]]}
    isMulti
    name="colors"
    options={colourOptions}
    className="basic-multi-select"
    classNamePrefix="select"
  />

https://codesandbox.io/s/react-codesandboxer-example-90zz6

Answer 1

要更改下拉指示器，您可以执行以下操作。

import React from 'react';
import Select, { components } from 'react-select';

const DropdownIndicator = props => {
  return (
    <components.DropdownIndicator {...props}>
      <span>&#9660;</span>
      // or triangle icons from FontAwesome etc
    </components.DropdownIndicator>
  );
};


<Select
  // other props
  components={{ DropdownIndicator }}
  // other props
/>

参考：https://react-select.com/components
滚动到下拉指示器部分。

编辑： 我只是意识到我没有回答你的第二个问题。 到底要改变什么颜色？ ?如果更改悬停时下拉指示器的颜色，则可以执行以下操作。

.dropdown-indicator-triangle:hover {
  color: red;
}

const DropdownIndicator = props => {
  return (
    <components.DropdownIndicator {...props}>
      <span className="dropdown-indicator-triangle">&#9660;</span>
      // or triangle icons from FontAwesome etc
    </components.DropdownIndicator>
  );
};