在屏幕中央旋转 material UI 对话框，当它的高度可能不同时

Question

我有一个 MUI 对话框，由于它是一个由用户过滤的列表，所以它的高度会有所不同。它最终变得很烦人，因为对话框在屏幕上“跳来跳去”，试图在屏幕增大和缩小时保持其中心位置。这是它的样子：

针对此特定问题的一个简单解决方案是从 dialogPaper 到 classes 属性取消设置 alignItems。像这样：

const useStyles = makeStyles((theme) => ({
  pivottedDialog: {
    alignItems: 'unset',
    ...
  },
}));

const MyDialog = () => (
  <Dialog
    {...otherProps}
    classes={{
      scrollPaper: classes.pivottedDialog
    }}
  >
    ...
  </Dialog>
)

然而，这会导致它在屏幕上失去居中定位，而我仍然需要它居中（参考带有完整列表的对话框，没有任何过滤）。我希望它的起点与未更改的对话框相同，适用于所有适用的屏幕尺寸（宽度超过 600 像素）

我怎样才能完成这件事？

我试过 pivottedDialog class 上的定位和 top 属性，但它会根据屏幕尺寸而变化。这需要响应并以宽度超过 600 像素的所有屏幕尺寸为中心。

我用两个对话框制作了一个示例应用程序，可以在这里玩：https://codesandbox.io/s/crazy-tesla-emc8m?file=/src/App.js

Answer 1

在这种情况下。由于 DialogContent 高度根据过滤器而变化，我建议为 Dialog 设置高度和宽度，为 DialogContent.

设置高度

工作演示:

为什么内容会移动？问题是因为对话框使用了 flex-blox (display: flex) 将内容对齐到中心 ( justify-content: center) 垂直（主轴）并将项目对齐到相对于视口水平（横轴）的中心 (align-items: center)。这使得屏幕中心和对话框中心成为如何对齐内容的参考点。

是否有任何解决方法？ 是的，但它们需要自定义 layout/custom 模式。使用 flexbox，您需要类似下面的演示来实现 centered 模态：

此示例演示所做的是创建一个包含三行的列并将模式锚定到第二行的顶部：

 ___________________________
|                           |
|         Empty Row         |
|      · 25% of view        |
|___________________________|
|   |------ Modal ------|   |
|   |  · Top anchored   |   |
|   |  · Expandable †   |   |
|   |  · 50% of view    |   |
|   |___________________|   |
|                           |
|                           |
|                           |
|___________________________|
|                           |
|         Empty Row         |
|      · 25% of view        |
|___________________________|

† 模态框只能扩展到它所在行的最大高度

这允许模态框在保持垂直和水平中心的同时收缩和增长。 center 不会成为行的中心，因为这需要模态垂直移动以补偿高度变化（这让您回到之前的内容移动问题）。

这种方法的缺点是：

需要自定义组件。
小视图端口会对模态内容产生不利影响，您可以在其中获得压缩的结果：

这种方法的优点是：

您可以更好地控制如何划分视口（25%/50%/25% 或 33.33%/33.33%/33.33% 或 20%/60%/20%， ...等等）
模态随着视口和随着过滤项的数量收缩和增长：

哪个是最好的方法？ 最简单和推荐的解决方案是在模态上设置一个 height/width。另一种解决方案是使用不会影响模态高度的可过滤下拉列表 select。

在屏幕中央旋转 material UI 对话框，当它的高度可能不同时

Pivotting a material UI dialog in the center of the screen when it's height may vary

javascript

css

reactjs

material-ui

makestyles