react怎样修改antd里的modal弹窗样式

在React中，若想修改Ant Design (antd) Modal组件的样式，你可以通过CSS自定义或者使用主题系统来自行定制。以下是两种常见的方法：

1. **直接覆盖CSS**:
- 首先，在你的项目中创建一个新的CSS文件，例如`customModal.css`，然后导入antd的Modal样式并添加你要修改的部分：

   /* customModal.css */
   .ant-modal {
     background-color: rgba(0, 0, 0, 0.5); /* 修改背景颜色 */
     border-radius: 6px; /* 修改圆角 */
   }
   
   .ant-modal-header {
     background-color: #f8f9fa; /* 修改头部背景色 */
   }

   /* 将新样式引入到组件中 */
   <Modal style={{ className: 'your-custom-class', css: require('./customModal.css') }}>
     {/* Modal内容 */}
   </Modal>

确保在`style`属性中添加了`className`来应用你自定义的类名，并使用`css`属性引入自定义CSS。

2. **使用Ant Design的主题系统**:
- 如果你想更细粒度地控制样式，可以利用antd的theme配置。首先，安装依赖`@ant-design/theme`：

   npm install @ant-design/theme --save

然后，在`theme.js`或`global.less`等地方设置Modal的样式：

   // theme.js 或 less 文件
   import { createTheme } from '@ant-design/theme';
   const theme = createTheme({
     modal: {
       // 自定义Modal样式
       background: 'rgba(0, 0, 0, 0.5)', // 背景颜色
       borderRadius: 6, // 圆角
     },
   });
   export default theme;

接下来，在你的组件中使用这个主题：

   import { ThemeProvider } from '@ant-design/react-context';
   ...
   <ThemeProvider theme={theme}>
     <Modal />
   </ThemeProvider>

记得在每次更新antd版本时检查其官方文档是否对API有所变动。