如何移除MultiValueRemove组件聚焦及hover状态下的默认红色背景？

Hey there! I’ve battled this exact stubborn hover styling issue with react-select’s MultiValueRemove component before—those default red hover backgrounds are tricky to override, but we can get it sorted.

The problem here is that react-select’s default styles use pseudo-classes like :hover with higher specificity than your base styles, so just setting backgroundColor in the base multiValueRemove object won’t cut it. You need to explicitly target the :hover pseudo-class in your custom styles, and optionally tie it to the component’s state if needed.

Here’s how to update your style code:

multiValueRemove: (provided, state) => ({
  ...provided,
  color: '#ffffff',
  backgroundColor: '#6FC5C4',
  borderRadius: 0,
  // Explicitly override the hover state background
  '&:hover': {
    backgroundColor: '#6FC5C4', // Use your desired default hover color here
    // Optional: Adjust based on component state if needed
    ...(state.isFocused && {
      backgroundColor: '#5aafad' // Custom hover color when focused
    }),
    ...(state.isSelected && {
      backgroundColor: '#4a9998' // Custom hover color when selected
    })
  },
  // Also override focus state if the default outline or background is interfering
  '&:focus': {
    backgroundColor: '#6FC5C4',
    outline: 'none' // Remove default focus outline if you don't want it
  }
}),

Make sure this multiValueRemove style is part of the styles object you pass to your <Select> component (with isMulti enabled, of course).

If you still see the red hover background after this, double-check two things:

• Are you using the correct react-select version? The multiValueRemove style key is consistent across recent versions, but older ones might use slightly different naming.
• As a last resort (try to avoid this if possible), you can add !important to the hover background color to force specificity:

  '&:hover': {
    backgroundColor: '#6FC5C4 !important'
  }
  

That should fully replace the unwanted red hover background with your custom color.

内容的提问来源于stack exchange，提问作者Vibby87