首页 > 解决方案 > 无法在中心显示材料 ui 小吃吧

问题描述

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

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

https://codesandbox.io/s/snackbar-background-color-f37po是展示该问题的示例。这里有什么问题?

标签: cssreactjsmaterial-ui

解决方案


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

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

推荐阅读