聚焦时如何删除 MultiValueRemove 上的红色背景

Question

我想MultiValueRemove在容器聚焦时对其进行样式设置（内部带有 x 以删除所选值的容器）。backgroundColor我不想更改为红色。

当背景既没有聚焦也没有选择时，我可以设置背景样式，但“onHover”红色背景不受影响。isSelected当我将鼠标悬停在红色背景上时，使用 state 设置背景样式isFocused不会影响红色背景。

multiValueRemove: (provided, state) => ({
  ...provided,
  color: '#ffffff',
  backgroundColor: '#6FC5C4',
  borderRadius: 0,
}),

Answer 1

有一个技巧，在这种情况下isSelected不起作用isFocused，但您可以使用常规css悬停状态，如下所示：

 multiValueRemove: (base, state) => ({
    ...base,
    color: "#fff",
    backgroundColor: "#6FC5C4",
    borderRadius: 0,
    "&:hover": {
      backgroundColor: "#6FC5C4",
      color: "#fff"
    }
  })