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

Question

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.

Answer 1

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

Answer 2

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

Answer 3

It helped me.

SnackbarProviderProps:

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

Styles:

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

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

Answer 4

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>

Answer 5

Some of the solution provided here changes the behaviour of all the variants. Below is the example where you can change default green background of the success variant to blue.

import ReactDOM from "react-dom";
import { SnackbarProvider } from "notistack";
import { makeStyles } from "@mui/styles";

import { SnackBarButton } from "./snackbar";

const useStyles = makeStyles({
  overriddenSuccess: {
    backgroundColor: "blue !important"
  }
});
function App() {
  const classes = useStyles();
  return (
    <SnackbarProvider
      classes={{
        variantSuccess: classes.overriddenSuccess
      }}
    >
      <SnackBarButton />
    </SnackbarProvider>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

Code sandbox link

Here are three options for doing the same