时间戳

首页 > 解决方案 > 如何使用“multiselect-react-dropdown”包自定义“Multiselect”组件中的选择箭头？

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

问题描述

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

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

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

标签： reactjsdropdownmulti-select

解决方案

不是最优雅的解决方案，但您可以创建自己的 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"

推荐阅读