Material-UI对话框覆盖？

Question

我正在使用React-Redux Material-UI包：http://www.material-ui.com/#/components/dialog

我正在尝试在用户登录后使用圆形指示符在整个对话框组件上添加灰色叠加层。

尝试在对话框体中执行此操作：

-release

导致出现如下对话框：

无论如何要使这个工作，所以'loadingRoot'类将覆盖整个对话框？

Answer 1

material-ui对话框在内部呈现，内容容器的位置为 relative （source）。因此，您可以使用 position：absolute; 更改基于此内容容器定位的装载容器。您还必须增加z-index，以便叠加层位于顶部。

使用css：

.loadingRoot {
  background-color: blue;
  position: absolute;
  z-index: 2000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

使用内联样式：

<div style={{
  backgroundColor: 'blue',
  position: 'absolute',
  zIndex: 2000,
  top: 0,
  left: 0,
  bottom: 0,
  right: 0
}>
  Content
</div>