如何解决Material UI Confirm Alert隐藏在对话框后面
我有一个材质 ui 对话框,让用户确认一个操作。问题是警报隐藏在对话框后面。有没有办法给警报一个更高的 z 索引或其他东西来避免这种情况,以便警报占据前台?
import Dialog from "@material-ui/core/Dialog";
import { confirmAlert } from "react-confirm-alert";
<Dialog><Button onClick={clickEvent}</Button></Dialog>
function clickEvent(){
await confirmAlert({
title: "title",message: "message",buttons: [
{
label: "ok",},{
label: "cancel",],});
}
}
作为一种解决方法,我可以在单击事件时关闭对话框,然后再次重新打开。宁愿能够让警报占据前台。
解决方法
您可以使用confirmAlert 组件上的overlayClassName 选项来放置z-index。 下面是一个例子:
CSS:
.overlay-custom-class-name {
z-index: 101;
}
反应:
confirmAlert({
title: 'Test Title',message: 'Question',buttons: [
{
label: 'Yes',onClick: () => this.function()
},{
label: 'No'
}
],overlayClassName: "overlay-custom-class-name" --Put your css Class
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。