Ant Design Modal如何移除或修改黑色背景及线条背景

你提到的Modal线条背景默认是头部底部、脚部顶部的分割边框，可通过以下几种方式移除，适配不同版本和使用场景：

单组件局部修改（推荐，不影响全局样式） #

Ant Design v5 版本 #

直接使用styles属性针对性关闭对应区域边框：

import { Modal } from 'antd';

<Modal
  title="示例模态框"
  open={isOpen}
  onOk={handleOk}
  onCancel={handleCancel}
  styles={{
    header: { borderBottom: 'none' }, // 移除头部底部分割线
    footer: { borderTop: 'none' } // 移除脚部顶部分割线
  }}
>
  <p>模态框内容区域</p>
</Modal>

Ant Design v4 版本 #

使用对应区域的样式属性修改：

import { Modal } from 'antd';

<Modal
  title="示例模态框"
  visible={isOpen}
  onOk={handleOk}
  onCancel={handleCancel}
  headerStyle={{ borderBottom: 'none' }}
  footerStyle={{ borderTop: 'none' }}
>
  <p>模态框内容区域</p>
</Modal>

全局统一修改（项目所有Modal生效） #

在入口文件通过ConfigProvider配置主题token，一次性关闭所有Modal的分割线：

import { ConfigProvider } from 'antd';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <ConfigProvider
    theme={{
      components: {
        Modal: {
          headerBordered: false,
          footerBordered: false
        }
      }
    }}
  >
    <App />
  </ConfigProvider>
);

CSS样式覆盖兜底方案 #

如果上述属性修改不生效，可通过自定义类名覆盖默认样式：
首先给Modal添加自定义类名：

<Modal className="no-border-modal" /* 其他属性 */>
  内容
</Modal>

在CSS文件中添加对应样式：

.no-border-modal .ant-modal-header {
  border-bottom: none !important;
}
.no-border-modal .ant-modal-footer {
  border-top: none !important;
}

效果参考 #

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