如何修改antd Modal组件的取消与确定按钮颜色

1. 直接通过CSS类覆盖样式 #

Antd的Modal按钮自带默认类名，你可以写自定义CSS来覆盖颜色：

先定义全局或局部样式：

/* 确定按钮（主按钮） */
.custom-modal-btn .ant-btn-primary {
  background-color: #2ecc71;
  border-color: #2ecc71;
}
.custom-modal-btn .ant-btn-primary:hover {
  background-color: #27ae60;
  border-color: #27ae60;
}

/* 取消按钮（默认按钮） */
.custom-modal-btn .ant-btn-default {
  background-color: #e74c3c;
  border-color: #e74c3c;
  color: #fff;
}
.custom-modal-btn .ant-btn-default:hover {
  background-color: #c0392b;
  border-color: #c0392b;
}

再给Modal组件添加对应的className：

import { Modal } from 'antd';

<Modal
  title="自定义按钮颜色"
  visible={true}
  className="custom-modal-btn"
  onCancel={() => {}}
  onOk={() => {}}
>
  <p>内容区域</p>
</Modal>

2. 自定义Footer按钮 #

不想写CSS的话，直接通过Modal的footer属性完全自定义按钮，用Antd Button组件直接设置样式：

import { Modal, Button } from 'antd';

<Modal
  title="自定义按钮"
  visible={true}
  footer={null} // 先清空默认底部按钮
  onCancel={() => {}}
>
  <p>内容区域</p>
  <div style={{ textAlign: 'right', marginTop: 16 }}>
    <Button
      style={{ marginRight: 8, backgroundColor: '#e74c3c', borderColor: '#e74c3c', color: '#fff' }}
      onClick={() => {}}
    >
      取消
    </Button>
    <Button
      type="primary"
      style={{ backgroundColor: '#2ecc71', borderColor: '#2ecc71' }}
      onClick={() => {}}
    >
      确定
    </Button>
  </div>
</Modal>

3. 全局主题配置（适合全项目统一修改） #

如果需要整个项目统一调整按钮颜色，用Antd的ConfigProvider配置主题token：

Antd v5版本： #

import { ConfigProvider, Modal } from 'antd';

const customTheme = {
  token: {
    colorPrimary: '#2ecc71', // 全局主色，影响所有primary按钮（包括Modal确定按钮）
  },
  components: {
    Button: {
      defaultBg: '#e74c3c', // 默认按钮背景色（对应取消按钮）
      defaultColor: '#fff', // 默认按钮文字颜色
      defaultHoverBg: '#c0392b', // 默认按钮hover背景色
    },
  },
};

function App() {
  return (
    <ConfigProvider theme={customTheme}>
      <Modal
        title="全局主题按钮"
        visible={true}
        onCancel={() => {}}
        onOk={() => {}}
      >
        <p>内容区域</p>
      </Modal>
    </ConfigProvider>
  );
}

Antd v4版本： #

在全局less文件中配置变量：

@primary-color: #2ecc71;
@btn-default-bg: #e74c3c;
@btn-default-color: #fff;
@btn-default-hover-bg: #c0392b;

然后在webpack/vite配置中引入该less文件，覆盖Antd默认样式。

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