Mui V5 Snackbar 定制 position

Question

我正在尝试 position 右上角的 Snackbar 和一些 top: customization 但我无法正确设置它。

这是我的尝试：

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 固定在顶部/右侧

Answer 1

我终于想通了，但我不确定这是否是实现它的最佳方式。 请让我知道你的想法？ 以及是否有更好的方法。

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>
  );
}

Answer 2

我在我的样式表中使用它。css

.MuiSnackbar-anchorOriginTopCenter {
  top: 150px !important;
}

Answer 3

除了相当有限的anchorOrigin之外，看起来Snackbar组件没有提供任何精确定位的方法。

它的根元素使用position: fixed因此用适当样式的<Portal>包装它也无济于事。

负责定位的组件的源代码。