reactjs - Material UI Confirm Alert is hidden behind dialog

Question

I have a material ui dialog that has the user confirm an action. The problem is the alert is hidden behind the dialog. Is there a way to give the alert a higher z index or something in order to avoid this so that the alert would take the foreground?

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",
          },
        ],
      });
    }
}

As a work around i could have dialog close on click event and then reopen again. Would rather be able to just have the alert take the foreground.

Answer 1

等待大神解答