如何移除Ant Design Primary Button组件的底部边框？

问题描述 #

在Ant Design主题设计令牌中设置"colorBgContainer": "#161616"后，Primary Button组件出现多余的底部边框，需要移除该边框。

解决方案 #

方法1：通过主题令牌覆盖相关样式 #

Ant Design的Button组件有专门控制边框的令牌，直接在主题配置里覆盖底部边框样式即可：

// React项目主题配置示例
import { ConfigProvider } from 'antd';

const customTheme = {
  token: {
    colorBgContainer: '#161616',
    // 移除Primary Button默认底部边框
    buttonPrimaryBorder: 'none',
    // 同时覆盖hover、active状态的边框（如果存在）
    buttonPrimaryHoverBorder: 'none',
    buttonPrimaryActiveBorder: 'none',
  },
};

function App() {
  return (
    <ConfigProvider theme={customTheme}>
      {/* 应用内容 */}
    </ConfigProvider>
  );
}

方法2：自定义CSS强制移除边框 #

如果主题令牌无法直接生效，可通过自定义CSS样式覆盖：

/* 全局样式文件中添加 */
.ant-btn-primary {
  border-bottom: none !important;
}

/* 补充hover、active、focus状态的样式，避免边框复现 */
.ant-btn-primary:hover,
.ant-btn-primary:active,
.ant-btn-primary:focus {
  border-bottom: none !important;
}

方法3：排查样式冲突 #

通过浏览器开发者工具（F12）查看Button元素的样式，确认底部边框是否来自项目自定义样式或第三方CSS库，找到来源后针对性覆盖即可。

内容的提问来源于stack exchange，提问作者rusli Abdul gani