React中如何用Tokens修改Ant Design v5按钮的悬浮颜色？

问题原因 #

你遇到的问题是因为Ant Design v5的**默认主题算法（defaultAlgorithm）**会自动基于colorPrimary生成hover、active等衍生样式色值，你手动在components.Button中设置的colorPrimaryBgHover、colorPrimaryBorderHover会被算法生成的值覆盖，导致不生效。另外注意你代码里的defaultAlogirthm是拼写错误，正确应为defaultAlgorithm，虽然当前不影响colorPrimary生效，但可能引发其他潜在问题。

解决方案 #

方案1：禁用Button组件的自动算法计算

如果只想手动指定Button的所有样式色值，不需要算法自动生成衍生色，可以在Button的组件配置中添加algorithm: null，关闭该组件的主题算法：

{
  algorithm: theme.defaultAlgorithm, // 修正拼写错误
  token: {
    ...
  },
  components: {
    Button: {
      algorithm: null, // 禁用Button的自动衍生色计算
      colorPrimary: 'purple',
      colorPrimaryBgHover: 'red',
      colorPrimaryBorderHover: 'violet'
    },
    ...
  }
}

方案2：自定义主题算法覆盖衍生色

如果需要保留全局主题算法的自动计算逻辑，仅修改Button的hover色，可以基于默认算法自定义逻辑，覆盖指定的衍生token：

import { theme } from 'antd';

// 自定义主题算法
const customAlgorithm = (token) => {
  // 先执行默认算法生成基础token
  const defaultGeneratedToken = theme.defaultAlgorithm(token);
  // 覆盖Button的hover相关色值
  return {
    ...defaultGeneratedToken,
    colorPrimaryBgHover: 'red',
    colorPrimaryBorderHover: 'violet',
  };
};

// 主题配置
{
  algorithm: customAlgorithm,
  token: {
    colorPrimary: 'purple', // 全局主色设置
  },
  components: {
    ...
  }
}

补充说明 #

• 若使用方案2，colorPrimary建议放在全局token中配置，这样其他组件的主色也会统一使用该值，同时自定义算法会基于此生成并覆盖Button的hover色。
• 可以通过Ant Design的Token调试工具实时预览token修改效果，帮助排查样式问题。

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