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

【问题标题】：Material-UI Snackbar on React gets fixed to the bottom of the pageReact 上的 Material-UI Snackbar 固定在页面底部
【发布时间】：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>

图片如下：

【问题讨论】：

标签： reactjs material-ui 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:

【讨论】：