是否可以将 MUI Snackbar 相对于其父 div 对齐，而不是相对于整个页面

Question

我使用 Material UI 的 Snackbar 和 Alert 组件的组合来显示数据库 Post 操作后的成功或错误消息。标准材质 UI 允许使用 prop 相对于页面定位该消息anchorOrigin，我在以下代码中使用该属性将消息在页面底部居中对齐：

<Snackbar open={open} autoHideDuration={5000} onClose={handleClose}         
    anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'center',
    }}>

    <Alert
        severity={severity}
        variant="filled"
        sx={{ width: '100%' }}
        >
        {message}
    </Alert>
</Snackbar>

不过，我不想与整个页面对齐，而是希望将警报相对于包含触发消息的代码的父 div 集中对齐。有没有办法做到这一点？我正在查看 Material UI 的自定义sx道具，看看是否有一种方法可以在我的场景中使用它，但看不到任何有用的东西。

Answer 1

SnackBar 的默认位置属性是fixed。

元素相position: fixed;对于视口定位，这意味着即使页面滚动，它也始终保持在同一位置。top、right、bottom 和 left 属性用于定位元素。

我们需要将其更改为absolute.

元素相position: absolute;对于最近定位的祖先定位（而不是相对于视口定位，如固定）。

因此，我们还需要为我们的小吃店制作一个家长定位的 div，使其能够按我们的预期工作。定位div的一个示例可以是position: relativediv。

<Box //This would be your resized div on the right side of page
  sx={{
    width: "500px",
    height: "500px",
    position: "relative",
  }}
>
  <Snackbar
    open={true}
    autoHideDuration={5000}
    onClose={handleClose}
    anchorOrigin={{
      vertical: "bottom",
      horizontal: "center",
    }}
    sx={{ position: "absolute" }}
  >
    <Alert severity={"success"} variant="filled" sx={{ width: "100%" }}>
      {"message"}
    </Alert>
  </Snackbar>
</Box>

要了解有关职位的更多信息，请阅读此内容