小编Jes*_*ess的帖子

我使用 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道具，看看是否有一种方法可以在我的场景中使用它，但看不到任何有用的东西。