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

Posted 2023-02-23

【中文标题】React 上的 Material-UI Snackbar 固定在页面底部

【英文标题】：Material-UI Snackbar on React gets fixed to the bottom of the page

【发布时间】：2021-07-25 00:14:02

【问题描述】：

我在组件中使用 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>

图片如下：

【参考方案1】：

本质上，<Snackbar /> 由position: fixed 坚持到底。​​p>

也许它的父母之一打破了它的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://***.com/a/52937920/863110