如何使用“multiselect-react-dropdown”包自定义“Multiselect”组件中的选择箭头？

【问题标题】：How to customize the select arrow in a "Multiselect" component using "multiselect-react-dropdown" package?如何使用“multiselect-react-dropdown”包自定义“Multiselect”组件中的选择箭头？
【发布时间】：2021-10-04 14:54:40
【问题描述】：

我想使用 multiselect-react-dropdown 包创建一个多选下拉菜单。但是，我无法更改选择箭头的颜色，因为它正在获取 svg 图像。我试图定位 svg 图像的类，但无法更改颜色。有什么方法可以使用这个包自定义选择箭头？

下面是下拉列表的沙箱链接。

https://codesandbox.io/s/wizardly-taussig-16i6k?file=/src/App.js:52-78

【问题讨论】：

标签： reactjs dropdown multi-select

【解决方案1】：

不是最优雅的解决方案，但您可以创建自己的 svg：

// save locally new_icon_down_dir.svg (edit "fill" to preferred color)
<svg
  xmlns="http://www.w3.org/2000/svg"
  height="32"
  viewBox="0 0 32 32"
  width="32"
>
  <g id="background"><rect fill="none" height="32" width="32" /></g>
  <g id="arrow_x5F_down"><polygon fill="blue" points="2.002,10 16.001,24 30.002,10" /></g>
</svg>

然后像这样覆盖 img 元素的 src：

const image = document.getElementsByClassName("icon_down_dir");
image.src = "new_icon_down_dir.svg"

【讨论】：