如何在React的Ant Design中实现点击删除按钮切换Radio Button颜色

解决方案 #

核心思路是通过动态父类名限定样式覆盖范围，仅在删除模式开启时生效，自动实现样式切换与回退，无需额外重置逻辑。

步骤1：给Radio.Group添加动态类名

修改Example组件中Radio.Group的className属性，根据deleteShop状态判断是否挂载删除模式的类：

<Radio.Group
  // 仅删除模式开启时添加delete-mode类
  className={`shops ${deleteShop ? 'delete-mode' : ''}`}
  onChange={(e) => {
    const selected = e.target.value;
    setSelectedShop(selected);
  }}
>
  {shopNames.map((name, index) => (
    <ShopSketch name={name} key={index} deleteShop={deleteShop} />
  ))}
</Radio.Group>

步骤2：编写带作用域的覆盖样式

所有样式都以.delete-mode作为前缀，仅在删除模式下生效：

/* 选中态样式 */
.delete-mode .ant-radio-button-wrapper-checked {
  border-color: #ff4d4f !important;
  color: #ff4d4f !important;
}
/* hover态样式 */
.delete-mode .ant-radio-button-wrapper:hover {
  color: #ff4d4f !important;
  border-color: #ff4d4f !important;
}
/* focus态样式 */
.delete-mode .ant-radio-button-input:focus + .ant-radio-button-wrapper {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 0 2px rgb(255 77 79 / 20%) !important;
}
/* 选中态的分隔线伪元素样式 */
.delete-mode .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
  background-color: #ff4d4f !important;
}

方案优势

• 对现有代码侵入性极低，仅需要修改1行类名代码，无需调整子组件
• 样式自动切换：deleteShop状态为false时自动移除类名，Radio.Button直接恢复Ant Design默认主题色，无需手动重置样式
• 不会全局污染Ant Design组件样式，仅作用于当前Radio.Group范围

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