Material UI：打开 MUI 对话框时无法与背景元素交互答案

【问题标题】：Material UI: not able to interact with the background elements when the MUI Dialog is openMaterial UI：打开 MUI 对话框时无法与背景元素交互
【发布时间】：2023-02-16 19:48:00
【问题描述】：

我正在使用 MUI 设计聊天框样式，但遇到了问题。当对话框打开时，我无法与背景元素进行交互。我只能单击对话框内容，但无法单击背景表单组件。

这是他的 codesandbox 链接： https://codesandbox.io/s/stupefied-snowflake-jolyw7?file=/src/components/Chatbox.js

在控制台中，我将 z-index 更改为 1 它可以工作但无法与聊天框的前台组件进行交互。

【问题讨论】：

标签： reactjs material-ui responsive-design frontend styling

【解决方案1】：

您必须先关闭模态，然后才能在背景表单中进行任何更改。

检查了您的代码，发现外部点击不起作用模态未隐藏，因此您无法使用该表单。

将对话框材质 UI 更改为此：

 <Dialog
        disableScrollLock
        disableEnforceFocus
        hideBackdrop
        onClick={handleClose}
        aria-labelledby="customized-dialog-title"
        open={open}
        transitionDuration={{ enter: 500, exit: 500 }}
        // scroll="body"
        sx={{
          paddingLeft: "50%"
        }}
      >

有了这个，当您单击背景表单元素时，首先会关闭模式弹出窗口，然后您可以在表单中进行更改。

希望这可以帮助！

【讨论】：

它不应该在点击任何地方关闭是保持打开直到使用不想关闭我把按钮放在右上角。对话框打开或不使用都可以填写表格。这是场景。感谢您的帮助，这是我第一次发布问题的经验。
哦好的，我知道你想做什么，基本上当你打开模态弹出窗口并检查它时，它将全屏显示，只有显示部分是正在显示的内容，我们无法访问打开模态的背景元素。为了改变这一点，我们必须关闭模式，然后访问背景元素。这就是为什么我添加了一个代码，当我们在模式弹出窗口之外单击时，弹出窗口将首先消失，然后我们可以访问表单。 @伊姆兰亚辛