Question

我想为MultiValueRemove容器聚焦时设置样式（内部带有x的容器以删除所选的值）。 backgroundColor变成我不想拥有的红色。

当既不聚焦也不选择背景时，我可以设置背景样式，但是“ onHover”红色背景仍然不受影响。当我将鼠标悬停在状态为isSelected的背景上时，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"
    }
  })

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

1 个答案: