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

2ledvvac 于 2023-02-15 发布在 Java

关注(0)|答案(1)|浏览(101)

我正在使用Material UI的Snackbar & Alert组件的组合来显示数据库Post操作后的成功或错误消息。Standard Material UI允许使用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居中对齐。有办法做到吗？我正在查看材质UI的自定义sx属性，看看是否有办法在我的场景中使用，但没有看到任何有用的东西。

JavaScript

来源：https://stackoverflow.com/questions/75371693/is-it-possible-to-align-mui-snackbar-relative-to-its-parent-div-rather-than-to

1条答案

按热度按时间

u0njafvf1#

SnackBar的默认位置属性为fixed。
带有position: fixed;的元素相对于视区定位，这意味着即使页面滚动，它也始终停留在同一位置。top、right、bottom和left属性用于定位元素。
我们需要将其更改为absolute。
具有position: absolute;的元素相对于最近的祖先定位（而不是相对于视口定位，如固定）。
因此，我们还需要为小吃店创建一个父定位div，以便按预期工作。定位div的示例可以是position: relative div。

<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>

要了解有关位置read this的详细信息

赞(0）回复(0）举报 2023-02-15

我来回答

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

1条答案

相关问题

热门标签

最新问答