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

【问题标题】：How do I change the default background color of notistack in MUI v5?如何更改 MUI v5 中 notistack 的默认背景颜色？
【发布时间】：2022-01-11 08:52:50
【问题描述】：

默认背景颜色为白色，但我想将其更改为深色。

在 mui v5 中启用了深色模式。

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

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

这就是 notistack 的实现方式。

【问题讨论】：

标签： reactjs material-ui notistack

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

【讨论】：

【解决方案2】：

它帮助了我。

SnackbarProviderProps：

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

样式：

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

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

【讨论】：