css - 无法在中心显示 Material ui snackbar

Question

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

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

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

Answer 1

根据以下链接中发生的以下讨论，垂直:“中心”将无法按预期工作。

https://github.com/mui-org/material-ui/issues/13234

使其垂直居中对齐。我们可以在 Snackbar 组件上使用 css 样式 height: 100%，

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