无法在中心显示材料 UI 小吃栏

Question

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

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

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

Answer 1

使其垂直居中对齐。我们可以在小吃栏组件上使用带有height: 100%sx道具。在MuiV5中测试并且工作正常。

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