[英]Mui V5 Snackbar custom position
I am trying to position a Snackbar to the top right with some top: customization but I not able to set it correctly.我正在尝试 position 右上角的 Snackbar 和一些 top: customization 但我无法正确设置它。
Here is my attempt:这是我的尝试:
import React from "react";
import { Snackbar, Alert } from "@mui/material";
import { styled } from "@mui/material/styles";
const StyledSnackbar = styled(Snackbar)(({ theme, props }) => ({
"& MuiSnackbar-root": {
top: theme.spacing(15),
},
}));
export default function Notification(props) {
const { notify, setNotify } = props;
return (
<StyledSnackbar
open={notify.isOpen}
autoHideDuration={3000}
anchorOrigin={{ vertical: "top", horizontal: "right" }}
>
<Alert severity={notify.type}>{notify.message}</Alert>
</StyledSnackbar>
);
}
Then I tried然后我试了
const StyledSnackbar = styled(Snackbar)(() => ({
"& MuiSnackbar-root": {
top: "100px",
},
}));
But it's still not working, the Snackbar is fixed to top/right但它仍然不起作用,Snackbar 固定在顶部/右侧
I finally figured it out, but I am not sure if this is the best way implementing it.我终于想通了,但我不确定这是否是实现它的最佳方式。 please let me know your thoughts?请让我知道你的想法? and if there is a better way of doing it.以及是否有更好的方法。
import React from "react";
import { Snackbar, Alert } from "@mui/material";
import { styled } from "@mui/material/styles";
const StyledSnackbar = styled((props) => <Snackbar {...props} />)(
({ theme }) => ({
"& .MuiSnackbar-root": {
top: theme.spacing(15),
},
})
);
export default function Notification(props) {
const { notify, setNotify } = props;
return (
<StyledSnackbar
open={notify.isOpen}
autoHideDuration={3000}
anchorOrigin={{ vertical: "top", horizontal: "right" }}
>
<Alert severity={notify.type}>{notify.message}</Alert>
</StyledSnackbar>
);
}
I use this in my stylesheet.css我在我的样式表中使用它。css
.MuiSnackbar-anchorOriginTopCenter {
top: 150px !important;
}
Doesn't look like Snackbar
component provides any means of precise positioning, apart from the fairly limited anchorOrigin
.除了相当有限的anchorOrigin
之外,看起来Snackbar
组件没有提供任何精确定位的方法。
It's root element uses position: fixed
hence wrapping it with properly styled <Portal>
doesn't help either.它的根元素使用position: fixed
因此用适当样式的<Portal>
包装它也无济于事。
Source code of the component responsible for positioning . 负责定位的组件的源代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.