javascript - Material-UI 的 Dialog 如何允许在对话框后面进行交互？

Question

我在我的React应用程序中使用Material-UI，并且在我单击一个按钮后，我有一个出现在多个表单元素上。Dialog

我还设置了该对话框以允许使用react-draggable 拖动它。

当对话框显示时，它后面的任何表单元素都不能被访问。我意识到阻止与对话框背后的元素进行交互从直觉上讲是有意义的。

但是，我试图弄清楚如何显示对话框，但仍然能够编辑它后面的表单元素。

这里的代码示例：

有谁知道是否可以显示 MaterialUI 对话框并且仍然能够与对话框后面的表单元素进行交互（即，当对话框被拖走时）？

标签： javascriptreactjsmaterial-uidraggable

Answer 1

该对话框旨在阻止所有其他交互，以便用户可以专注于其内容。无论如何，我找到了一个解决方案，可能不是更好，但在这里工作，代码是这样的：

<Dialog
  hideBackdrop // Disable the backdrop color/image
  disableEnforceFocus // Let the user focus on elements outside the dialog
  style={{ position: 'initial' }} // This was the key point, reset the position of the dialog, so the user can interact with other elements
  disableBackdropClick // Remove the backdrop click (just to be sure)
  ...
>
  ...
</Dialog>

这是一个工作示例