无法在中心显示材质 ui 小吃栏

Question

我有一个材料 ui 小吃栏，我需要将其显示在屏幕中间。下面是我试图传递的属性，使其显示在屏幕中心，但显示在屏幕顶部。

  anchorOrigin={{
   vertical: "center",
   horizontal: "center"
  }}

https://codesandbox.io/s/snackbar-background-color-f37po是展示该问题的示例。这是怎么回事？

Answer 1

使其垂直居中对齐。我们可以在 Snackbar 组件上使用sxprop height: 100%。在 MuiV5 中测试并且工作正常。

<Snackbar
   sx={{ height: "100%" }}
   anchorOrigin={{
      vertical: "top",
      horizontal: "center"
   }}
   ...
   ...
/>