React 上的 Material-UI Snackbar 固定在页面底部

问题描述

我在组件中使用 Material UI Snackbar，但 Snackbar 显示在页面底部并且不是固定的，因此用户必须滚动到底部才能看到它。

<Snackbar>
  open={open}
  autoHideDuration={6000}
  onClose={handleClose}
>
  <Alert onClose={handleClose} severity="error">
    There was an error signin up. Please  try again!
  </Alert>
</Snackbar>

图片如下：

解决方法

本质上，<Snackbar /> 会在 position: fixed 处保持底部。

也许它的父项之一打破了它的 fixed 位置，例如通过 transform 或 will-change: transform。

<div style={{ willChange: "transform" }}>
  <Snackbar open={open} onClose={handleClose}>
    <Alert onClose={handleClose} severity="error">
      There was an error signin up. Please try again!
    </Alert>
  </Snackbar>
</div>

https://codesandbox.io/s/material-demo-forked-gvlmk?file=/demo.js

---

有关破坏 position: fixed 的更多信息：

• https://dev.to/takaaki_suger/when-position-fixed-is-not-working-7i6
• https://stackoverflow.com/a/52937920/863110