如何更改 MUI v5 中 notistack 的默认背景颜色？

Question

默认的背景颜色是白色，但我想把它改成深色。

mui v5 启用深色模式。

我找到了更改错误、信息等的方法，但我想做的是更改默认背景颜色而不指定任何变体。

// _app.tsx
<SnackbarProvider maxSnack={3}>
  <Component {...pageProps} />
</SnackbarProvider>

这就是notistack的实现方式。

Answer 1

我也遇到了同样的问题。我制作了一个新的 <MySnackbar> 组件，将所有道具传递给原始 <Snackbar> 并在新组件中添加了默认的 variant 和 severity。更好的是你现在不需要写<Snackbar><Alert /><Snackbar />。

MUI 5.0.3 的示例如下（我希望它始终显示在顶部）


/* usage:
 *  This component should be connected to redux store.
 *  setup:
 *    <TopSnackbar /> // in top layer like App.tsx
 *    use with redux/snackbar.ts
 *  interact:
 *    import { showTopSnackbar, hideTopSnackbar} from "redux/snackbar"
 *    showTopSnackbar(message,severity?);
 *    hideTopSnackbar();
 */

import { Alert, IconButton, Snackbar } from "@mui/material";
import { connectTopSnackbar, hideTopSnackbar } from "redux/snackbar";
import { useSelector } from "redux/store";
import { useDispatch } from "react-redux";
import { useEffect } from "react";
import { Close } from "@mui/icons-material";
const DEFAULT_AUTO_HIDE_MS = 6000;

export function TopSnackbar() {
  const dispatch = useDispatch();
  const snackbar = useSelector((state) => state.snackbar);
  const { isOpenTopSnackBar, snackBarMessage, snackBarSeverity } = snackbar;
  const autoHideMs = 6000 ?? DEFAULT_AUTO_HIDE_MS;

  useEffect(() => {}, []);

  useEffect(() => {
    dispatch(connectTopSnackbar());
  }, [dispatch]);

  function closeHandler() {
    dispatch(hideTopSnackbar());
  }
  return (
    <Snackbar
      anchorOrigin={{ vertical: "top", horizontal: "center" }}
      open={isOpenTopSnackBar}
      autoHideDuration={autoHideMs}
      onClose={closeHandler}
      message={snackBarMessage}
    >
      {snackBarSeverity ? (
        <Alert
          variant="filled"
          severity={snackBarSeverity}
          action={
            <IconButton
              // variant="contained"
              color="inherit"
              size="small"
              onClick={closeHandler}
            >
              <Close />
            </IconButton>
          }
        >
          {snackBarMessage}
        </Alert>
      ) : undefined}
    </Snackbar>
  );
}

Answer 2

它帮助了我。

SnackbarProvider 道具：

 <SnackbarProvider
   classes={
      containerRoot: classes.containerRoot
   }
 />

样式：

containerRoot: {
    '& .SnackbarContent-root': {
      backgroundColor: 'color' !important`,

      '&.SnackbarItem-contentRoot': {
        borderRadius: '0px'
      }
    }
  }

Answer 3

默认情况下，MUI 组件带有情感作为它们的样式引擎。 makeStyle 在 mui v5 中已过时（已弃用）。如果你想覆盖更深层元素的样式，你必须这样做：

https://mui.com/material-ui/guides/interoperability/#deeper-elements-3


import { SnackbarProvider } from "notistack";
import { styled } from "@mui/material";

const StyledSnackbarProvider = styled(SnackbarProvider)`
  &.SnackbarItem-contentRoot {
    background-color: orange;
  }
`;

export default () => {
  return (
    <StyledSnackbarProvider>
      <MyApp />
    </StyledSnackbarProvider>
  );
};

如何更改 MUI v5 中 notistack 的默认背景颜色？

How do I change the default background color of notistack in MUI v5?

reactjs

material-ui

notistack