Ant Design_Modal的Tips

269 阅读1分钟

Modal

最近在做一个后台管理项目,项目中有很多地方都会使用到Modal弹窗,这里总结一些使用方法!

1. 使用方法直接调用弹窗

对于比较简单的弹窗,Ant Design提供了methods,用于直接调起弹窗组件,比如说像页面中退出登录或者一些简单的二次确认的弹窗,就可以直接Modal.confirm直接调起;具体参照官方文档;

这里记录的原因在于,我们的项目设置了统一的主题色,如果直接这么调用,发现,按钮的主题色还是官方默认的蓝色:

image.png

这里千万不要直接改个样式就得了,官方肯定有给方式,要不然以后主题色统一改了,那咋搞!

Modal.useModal()就是官方提供的解决方案,可以获取到我们项目的context信息;

const [modal, contextHolder] = Modal.useModal();


React.useEffect(() => {
  modal.confirm({
    // ...
  });
}, []);


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

改好之后的效果:

image.png