Antd Modal Drawer 更改默认项
当项目比较大使用了非常多的 Modal 和 Drawer 要是有需求一次性全部调整就会比较麻烦,目前 Antd 的 ConfigProvider 暂不支持(也有可能我没找到,待大佬指证)就比如由于默认 Modal Drawer 的遮罩层是可以点击关闭的,但是业务需要,要求全部不可点击,这时候一个一个去加就很麻烦,还容易遗漏。然后方案来了
React
新建 patch 的文件夹(名字随意)
为了方便扩展,结构根据自己需要调整
src/patch/Drawer/index.ts
import { Drawer } from 'antd';/*** 全局覆盖Drawer组件默认属性配置* 1. 强制禁用maskClosable防止误触关闭(原默认值true)* 2. 保留原有默认属性配置,仅扩展新特性*/
(Drawer as React.ComponentType<any>).defaultProps = {...(Drawer as React.ComponentType<any>).defaultProps,maskClosable: false,
};
src/patch/index.ts
import * as Drawer from './Drawer';export { Drawer };
在 main.tsx 引入
import '@/patch';
就可以全局覆盖