如何更改箭头并在 react-select 中放置一个三角形而不是它，以及悬停时如何改变颜色？

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>
  );
};

如何更改箭头并在 react-select 中放置一个三角形而不是它，以及悬停时如何改变颜色？

how to change the arrow and put a triangle instead of it in react-select and when hover change color?

reactjs

react-select