自定义Ant Design Button：color="primary"与variant="text"失效及类型疑问

你的代码逻辑存在两个关键问题，导致该场景下功能失效：

1. colorMap中未包含primary项，当传入color="primary"时，colorPrimary为undefined，无法触发ConfigProvider的主题覆盖逻辑，若你的全局主题有自定义colorPrimary，这里会直接使用原生默认值，和预期不符。
2. 硬编码AntdButton的color属性时，没有区分原生支持的颜色值，导致自定义颜色和原生颜色的逻辑混淆。

修复后的完整代码：

import React from "react";
import {Button as AntdButton, theme, ConfigProvider} from "antd";
import PropTypes from "prop-types";

export const Button = ({color, children, ...rest}) => {
    const {token} = theme.useToken();

    // 补充primary项，可自定义色值
    const colorMap = {
        primary: token.colorPrimary,
        success: token.colorSuccess,
        warning: token.colorWarning,
        info: token.colorInfo,
        error: token.colorError,
        secondary: "#3577f1",
    };

    const colorPrimary = colorMap[color];
    // 定义Antd原生支持的color值，避免硬编码覆盖
    const nativeColors = ['primary', 'danger', 'default', 'link'];
    const antdColor = nativeColors.includes(color) 
        ? color 
        : (color === 'error' ? 'danger' : 'primary');

    const button = <AntdButton color={antdColor} {...rest}>{children}</AntdButton>;

    return colorPrimary ? (
        <ConfigProvider
            theme={{
                token: {
                    colorPrimary,
                },
            }}
        >
            {button}
        </ConfigProvider>
    ) : (
        button
    );
};

Button.propTypes = {
    color: PropTypes.string,
    children: PropTypes.node,
};

修复说明：

• 在colorMap中添加primary项，确保传入color="primary"时能触发主题覆盖逻辑，匹配自定义色值。
• 新增nativeColors集合，区分原生支持的颜色值，避免错误覆盖AntdButton的color属性，保证variant="text"能正常读取主题色。

Ant Design的设计体系核心是简洁统一的视觉优先级，原生只保留最常用的按钮颜色类型，原因如下：

1. 聚焦核心操作：过多颜色会分散用户注意力，干扰对主操作、危险操作的识别，框架希望通过有限颜色明确操作优先级。
2. 预留扩展空间：框架提供了ConfigProvider和token主题系统，允许开发者根据业务需求自定义扩展颜色类型，这正是你当前实现的方案，既满足个性化需求，又不破坏整体设计一致性。
3. 维护设计规范：统一的颜色体系能避免产品各模块出现视觉混乱，保证全平台的设计语言统一。

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