Mui V5 Snackbar 自定义位置答案

【问题标题】：Mui V5 Snackbar custom positionMui V5 Snackbar 自定义位置
【发布时间】：2022-01-15 08:32:35
【问题描述】：

我正在尝试将 Snackbar 放置在右上角并带有一些 top: 自定义，但我无法正确设置它。

这是我的尝试：

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

【问题讨论】：

标签： javascript reactjs typescript material-ui

【解决方案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>
  );
}

【讨论】：