Modal
最近在做一个后台管理项目,项目中有很多地方都会使用到Modal弹窗,这里总结一些使用方法!
1. 使用方法直接调用弹窗
对于比较简单的弹窗,Ant Design提供了methods,用于直接调起弹窗组件,比如说像页面中退出登录或者一些简单的二次确认的弹窗,就可以直接Modal.confirm直接调起;具体参照官方文档;
这里记录的原因在于,我们的项目设置了统一的主题色,如果直接这么调用,发现,按钮的主题色还是官方默认的蓝色:
这里千万不要直接改个样式就得了,官方肯定有给方式,要不然以后主题色统一改了,那咋搞!
Modal.useModal()就是官方提供的解决方案,可以获取到我们项目的context信息;
const [modal, contextHolder] = Modal.useModal();
React.useEffect(() => {
modal.confirm({
// ...
});
}, []);
return <div>{contextHolder}</div>;
改好之后的效果: