Antd弹窗无法关闭 也没有动画

Antd 弹窗用方法调用后没有动画且无法关闭

const modal = Modal.info({
  content: <Table columns={columns} size="small" bordered dataSource={fields} pagination={false} />,
  prefixCls: 'xxxxx-modal',
  okText: '确定',
  okType: 'primary',
  maskClosable: true,
  icon: null,
  centered: true,
  onOk() {
    modal.destroy();
  },
});

如果遇到类似上述代码打开弹窗后无法关闭,这是由于定制 antd 的时候配置了 prefixCls 属性,用方法调用弹窗时弹窗不会渲染在
antd 的 ConfigProvider 组件中,以至于找不到 context 信息

<ConfigProvider
  locale={zh_CN}
  prefixCls="xxxxx"
  input={{ autoComplete: 'off' }}
  dropdownMatchSelectWidth={false}
  getPopupContainer={getPopupContainer}
  form={{ colon: false }}
>
  {children}
</ConfigProvider>

此时需要配置:

ConfigProvider.config({ prefixCls: 'xxxxx' });

如果遇到 message 等类似的方法调用异常可设置:

message.config({
  prefixCls: 'xxxxx-message',
});
posted @ 2023-01-10 16:00  xvivx  阅读(777)  评论(0编辑  收藏  举报