如何自定义 `Creatable` 上的 `x` 图标？

Question

我想将每个标签图标上的 x 图标更改为我自己的图像。

react-select支持吗？

Answer 1

根据文档和查看源代码后，您会发现 this 没有 render prop。 @renderRemoveIcon。您仍然可以通过 css 对其进行修改，但不如拥有自己的渲染器那么灵活。

Answer 2

纯CSS的解决方案：

.Select-value-icon {
  visibility: hidden;
  border: none;
  border-right: none;
}

.Select-value-icon::after {
  visibility: visible;
  content: url('/img/delete-tag-icon.png');
}

想法是使用 visibility: hidden 隐藏默认 x，然后生成包含自定义图像的额外元素。