Ensure variant classes are passed to SnackbarContent

[iamhosseindhv]

Fixes #440

You have to following options to override styles based on variants:

Option 1 - styled

import { styled } from "@mui/material";
import { SnackbarProvider } from "notistack";

const StyledSnackbarProvider = styled(SnackbarProvider)`
  &.SnackbarItem-variantSuccess {
    background: orange;
  }
`;

export default () => {
  return (
    <StyledSnackbarProvider>
      <MyApp />
    </StyledSnackbarProvider>
  );
};

Option 2 - makeStyles

import { SnackbarProvider } from 'notistack';
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles({
  overriddenError: {
    backgroundColor: "blue !important", // <-- note !important
  }
});


export default () => {
  const classes = useStyles();
  return (
    <SnackbarProvider
        classes={{
            variantError: classes.overriddenError,
        }}
    >
      <MyApp />
    </SnackbarProvider>
  );
};

Option 3 - notistack v3 (alpha)

Use notistack v3 using npm i notistack@alpha (in alpha) which gives you full control over your snackbars. Instead of trying to override styles, you make your own. Here's an example: https://codesandbox.io/s/pedantic-shaw-y3nis
Take a look at ThemeResponsiveSnackbar.tsx. Change the styles as you wish.

On v3 you can also define custom variants:

<SnackbarProvider
    Components={{
        success: MyCustomSuccessNotification,
        reportComplete: ReportComplete,
    }}
>
</SnackbarProvider>

interface ReportCompleteProps extends CustomContentProps {
    allowDownload: boolean;
}

const ReportComplete = React.forwardRef((props: ReportCompleteProps, ref) => {
    const {
        // You have access to notistack props, options 👇🏼
        variant,
        message
        // as well as your own custom props 👇🏼
        allowDownload,
    } = props;

    // 
})

enqueueSnackbar('Your report is ready to download', {
   variant: 'reportComplete',
   persist: true,
   allowDownload: true, // <-- pass any additional options
})