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.

ozkalai · Accepted Answer · 2022-05-30T20:07:29.720

9

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

edited May 30 '22 at 20:07

answered May 30 '22 at 20:01

ozkalai

106
1
3

how to i can add close btn in SnackbarProvider – Alireza Bagheri Oct 15 '22 at 08:53

score 1 · Answer 2 · answered Feb 01 '22 at 15:15

It helped me.

SnackbarProviderProps:

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

Styles:

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

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

score 0 · Answer 3 · answered Jan 11 '22 at 08:57

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

score 0 · Answer 4 · answered Jun 16 '22 at 14:21

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>

Sarath · Answer 5 · 2023-02-24T14:08:12.913

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

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

5 Answers5