我试图通过一些 top: 自定义将 Snackbar 定位到右上角,但我无法正确设置它。
这是我的尝试:
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>
);
}
然后我试了一下
const StyledSnackbar = styled(Snackbar)(() => ({
"& MuiSnackbar-root": {
top: "100px",
},
}));
但是还是不行,Snackbar固定在上/右
最佳答案
我终于想通了,但我不确定这是否是实现它的最佳方式。请让我知道你的想法?以及是否有更好的方法。
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>
);
}
关于javascript - Mui V5 Snackbar 自定义位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70308068/