React中如何实现图标按钮三种状态的不同边框颜色效果？

这是CSS选择器权重与样式覆盖规则导致的典型问题：

• 单独的:hover伪类选择器和标记选中状态的类选择器（比如.selected/.active）权重值完全相同
• 如果hover样式的书写位置在选中态样式之后，或者选择器范围没有排除选中状态，鼠标悬浮在选中按钮上时，hover规则就会覆盖选中态的边框样式

1. 原生CSS/CSS Modules 场景 #

通过组合选择器补全选中态下的hover规则，同时限定非选中态的hover生效范围，避免样式冲突，参考写法：

/* 常规状态边框 */
.icon-btn {
  border: 1px solid #dcdfe6;
  background: #fff;
  /* 其他按钮基础样式 */
}

/* 仅非选中状态下，hover生效 */
.icon-btn:not(.is-selected):hover {
  border-color: #409eff;
}

/* 选中状态默认边框 */
.icon-btn.is-selected {
  border-color: #67c23a;
}

/* 选中状态下的hover边框，可直接复用选中态颜色，或按设计要求调整为更深的同色系 */
.icon-btn.is-selected:hover {
  border-color: #5daf34;
}

React侧只需要按原有逻辑，给选中的按钮挂上is-selected类名即可，不需要改动已有的状态判断逻辑。

2. 原子化CSS（如Tailwind）场景 #

直接根据选中状态动态拼接对应状态下的hover类即可，从根源避免选择器冲突：

<button 
  className={`p-2 rounded border ${
    isSelected 
      ? 'border-blue-600 hover:border-blue-700' // 选中态：默认+hover样式绑定
      : 'border-gray-300 hover:border-blue-400' // 常规态：默认+hover样式绑定
  }`}
>
  <Icon />
</button>

3. CSS-in-JS（如styled-components）场景 #

在样式定义里直接通过props判断状态，拆分不同状态下的hover规则：

const IconBtn = styled.button`
  border: 1px solid #dcdfe6;
  &:hover {
    border-color: ${props => props.$selected ? '#5daf34' : '#409eff'};
  }
  ${props => props.$selected && `
    border-color: #67c23a;
  `}
`

// 使用时
<IconBtn $selected={isSelected} onClick={handleClick}>
  <Icon />
</IconBtn>

不要图省事给选中态样式加!important强制提权，后续如果要加禁用态、加载态等更多按钮状态，样式优先级会彻底混乱，很难维护。

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