Material-ui Snackbar 弹出屏幕答案

【问题标题】：Material-ui Snackbar pop up out of ScreenMaterial-ui Snackbar 弹出屏幕
【发布时间】：2020-06-02 12:26:38
【问题描述】：

嗨！

我使用 React、Material-ui 进行玩具项目。
当 snack bar 或 react-toastify 弹出时。
它没有隐藏在屏幕上。（红色：向上/向下滚动，然后小吃栏就在那里）
我改变了弹出位置的顶部/底部。但是，它不能涵盖所有情况。

它如何在屏幕上弹出。（屏幕上显示绿色）
我想在“蓝色”位置弹出 SnackBar 并通过滚动来隐藏。

谢谢

  <Grid item>
    <Grid container direction="row" justify="space-evenly">
      <Grid item>
        <Button variant="outlined" onClick={() => {
          toast.success("Update!")
        }}>Update!</Button>
      </Grid>
    </Grid>
  </Grid>
<ToastContainer position="top-center" autoClose={2500} />

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我解决了.. 我将<ToastContainer/> 从子组件移动到顶部组件（从“内容”到“标题”）


export const App = observer(() => {
  const classes = kpopStyle();
  return (
    <React.Fragment>
      <BrowserRouter>
        <Header /> // <-- to Here
        {storeUiHandler.checkMobile() ?
          <div className={classes.contentLayoutMobile}>
            <Content /> // <-- from Here
            <Footer />
          </div> :
          <div className={classes.contentLayoutPC}>
            <Content />
            <Footer />
          </div>}
      </BrowserRouter>
    </React.Fragment>
  );
});

现在，它按我的预期工作。

【讨论】：