如何修改antd组件库modall原来得样式

在Ant Design（简称AntD）组件库中，如果你想修改Modal组件的默认样式，你可以通过以下几个步骤来实现：

1. **全局样式覆盖**:
- 将自定义的CSS规则放在`global.less`或`global.css`文件中，并将这个文件添加到项目的全局CSS加载路径中。这样可以影响所有页面的Modal组件。

.ant-modal {
  /* 自定义样式 */
  background-color: #f0f2f5; /* 修改背景色 */
  border-radius: 4px; /* 修改圆角 */
}

2. **主题配置**:
如果你正在使用Ant Design Pro或有使用主题系统（如`@ant-design/pro-desgin`），你可以创建或修改当前项目的主题配置文件(`theme.js` 或 `theme.config.js`)，针对Modal进行单独定制。

import { createTheme } from '@ant-design/pro-components';

const theme = createTheme({
  modal: {
    // 自定义属性
    backgroundColor: '#f0f2f5',
  },
});

export default theme;

3. **局部样式覆盖**:
对于特定Modal实例，可以在React组件内使用`className`属性直接应用自定义样式。

import { Modal } from 'antd';

function MyComponent() {
  const customModal = (
    <Modal
      title="Custom Modal"
      className="your-custom-modal-style" {/* 自定义类名 */}
      style={{ /* 额外的样式 */ }}
    >
      ...
    </Modal>
  );

  return <div>{customModal}</div>;
}

export default MyComponent;

请注意，直接修改Ant Design源码不是推荐的做法，因为这可能导致未来升级时需要手动更新。如果需要更精细的控制，建议使用CSS-in-JS库（如 styled-components）配合高阶组件(HOC)的方式来进行。