sweetalert 2 中的输入无法在材料 UI 模式反应 js 中输入

Question

我有一张卡来显示订单，卡内取消时会打开 sweetalert2 弹出窗口，询问取消原因。这在订单屏幕上运行得很好。

<Grid item md={8} sm={12}>
    orders.map((order) => <SupplierOrderBlock data={order} />)
</Grid>

取消后，这些大火。第一个要求用户输入原因，如果用户没有输入原因，第二个甜蜜警告会提示用户输入原因才能取消。

const cancelOrder = (orderID, status) => {
    Swal.fire({
      title: "Are You Sure You Want to Cancel Order",
      text: "Please Enter the reason for the cancellation of order",
      input: "text",
      showCancelButton: true,
      confirmButtonColor: "#1c8fec",
      cancelButtonColor: "#fa013b",
      customClass: 'swal-wide'
    }).then((result) => {
      if (result.value == '') {
        swal({
          title: "You can not cancel without giving a reason",
          showCancelButton: true,
          confirmButtonColor: "#1c8fec",
          cancelButtonColor: "#fa013b",
          buttons: {
            Confirm: { text: "Okay", className: "okayButton" },
          },
        });
      }
else if (result.isConfirmed) { //cancel order}

这工作得很好。

现在，当我尝试在 Material UI 模式中的仪表板上使用相同的组件时，它不允许我输入文本。

<Modal
        open={modal}
        onClose={handleClose}
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
        style={{ width: "60%", zIndex: 1, marginLeft: '-10%' }}
      >
        <Box style={{ marginLeft: "50%", marginTop: "25vh", width: "100%", position: 'absolute' }}>
          <SupplierOrderBlock data={supplierorder} />
        </Box>
      </Modal>

如果我从模态中删除 Z-index 属性，则 swal 会位于模态后面

但是关闭模式后它可以让我们输入原因

Answer 1

从 mui 抽屉打开 sweet Alert2 时我也遇到了同样的问题 并能够使用disableEnforceFocus修复它 标记到我的 mui 抽屉 禁用EnforceFocus >