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

user_15110405 0
Viewed 1885

The default background color is white, but I'd like to change it to a dark color.

Dark mode is enabled in mui v5.

I've found ways to change the error, info, etc., but what I want to do is to change the default background color without specifying any variant.

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

This is how notistack is implemented.

notistack material-ui reactjs
4 Answers

By default, MUI components come with emotion as their style engine. makeStyle is obsolete with mui v5 (depracated). If you want to override style of deeper element you have to do like this:

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

It helped me.

SnackbarProviderProps:

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

Styles:

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

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

I had the same problem too. I made a new <MySnackbar> component passing all the props to the original <Snackbar> and added an default variant and severity in the new component. It's even better that you don't need to write <Snackbar><Alert /><Snackbar /> now.

The example of MUI 5.0.3 is as below (I wanted it to always show at top)


/* 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>
  );
}
user_162231220

You can use the sx prop for MUI v5

<SnackbarProvider
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'center',
  }}
  sx={{
    "& .SnackbarContent-root": {
      color: "primary.main",
      bgcolor: "secondary.main"
    }
  }}
>
  <MyApp />
</SnackbarProvider>
user_33106690
Related