如何修改Antd框架中Button组件的文字颜色与内置图标的颜色

Ant Design 内置图标和Button组件都支持自定义样式属性，你可以通过以下几种方式实现需求： #

• 方案1：直接通过style属性修改（最适合单一场景）
  DownloadOutlined图标组件本身支持标准HTML元素属性，不需要找特殊CSS字段，直接给style传入color值即可修改图标颜色，按钮文字颜色直接给Button传style设置即可，内联样式优先级足够覆盖type="primary"的默认样式：

const App = () => {
  return (
      <Button 
        type="primary"
        style={{ color: '#000000' }}
      >
        {/* 直接给图标设置color属性即可修改填充色，marginRight用来调整图标和文字的间距 */}
        <DownloadOutlined style={{ color: '#5e46a1', marginRight: 8 }}/>
        My Button
      </Button>
  );
};

原理说明：Antd 图标本质是SVG元素，默认填充色设为了currentColor，会继承父元素的颜色，单独给图标设置color属性就可以直接修改其填充色。 #

• 方案2：通过自定义类名修改（适合多场景复用）
  如果需要在多个位置复用该样式，可以给组件绑定自定义类名，通过CSS文件统一设置：

// 组件代码
const App = () => {
  return (
      <Button 
        type="primary"
        className="custom-black-btn"
      >
        <DownloadOutlined className="custom-purple-icon"/>
        My Button
      </Button>
  );
};

/* 全局CSS文件 */
.custom-black-btn {
  color: #000000;
}
.custom-purple-icon {
  color: #5e46a1;
  margin-right: 8px;
}

如果遇到样式被覆盖不生效的情况，可以在CSS属性后加!important提升优先级。 #

• 方案3：全局批量修改（适合全项目统一按钮样式）
  如果需要全站的primary类型按钮文字都是黑色、配套下载图标都是紫色，可以通过Antd的ConfigProvider全局配置主题token实现，不需要单独给每个组件加样式：

import { ConfigProvider } from 'antd';

const App = () => {
  return (
    <ConfigProvider
      theme={{
        components: {
          Button: {
            primaryColor: '#000000',
          }
        }
      }}
    >
      {/* 你的项目根页面代码 */}
    </ConfigProvider>
  )
}

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