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