Use deprecated class cause the snackbar not clickable

[Jack-Works]

In code

notistack/src/SnackbarContainer.tsx

Line 8 in 1806f30

container: '& > .MuiCollapse-container',

it uses the deprecated class name mui/material-ui#24084

And cause the pointer-events: all not set. The whole snack bar becomes unclickable.

[Jack-Works]

Change it to container: '& > .MuiCollapse-root', fixes our bug.

[liuyisnake]

have the same issue
and i found dom tree container has the class MuiCollapse-container**-364**
which has a random number append the class name

[manuelcanepa]

There is a workaround for this?

[EugeneMeles]

🔥 Fast fix:
add style={{pointerEvents: 'all'}} to your SnackbarProvider

[iamhosseindhv]

Apologies for responding late. Please follow the issue template. Collapse component accepts container key if you're using MUI < v4.12.0 and root key if you're using MUI >= v4.12.0.

If you're using MUI v5, usenpm i notistack@next
If you're using MUI >= v4.12.0, I'd suggest going with the above approach.

Please let me know if you're having issues with the solutions above.

[Methuselah96]

@iamhosseindhv Upgrading to v4.12.0 also seems to make it so there's no space between multiple snackbars.

Before:

After:

[EugeneMeles]

You can make something like this.
Make control of styles to jss.

style.ts:

import {makeStyles, Theme} from '@material-ui/core/styles';

export default makeStyles((theme: Theme) => ({
  root: {
    margin: theme.spacing(.75, 0),
    pointerEvents: 'all',
  }
}));

index.tsx:

import React from 'react';
import {SnackbarProvider, SnackbarProviderProps} from 'notistack';
import useStyles from './style';

export default function Provider(props: SnackbarProviderProps): JSX.Element {
  const classes = useStyles();
  return <SnackbarProvider className={classes.root} {...props}/>;
}

[iamhosseindhv]

This issue has been fixed in notistack v1.0.10

[bartvde]

The fix doesn't work for people using createGenerateClassName with disableGlobal: true in material-ui

https://material-ui.com/styles/api/

[MatiasCiccone]

as @bartvde mentioned this is still an issue for those who use createGenerateClassName with disableGlobal: true

[BrentFarese]

as @bartvde mentioned this is still an issue for those who use createGenerateClassName with disableGlobal: true

We have this issue and need to use disableGlobal: true to use DataGridPro V5 w/ MUI V4. @bartvde or @MatiasCiccone did either of you come up with a fix that works while still using disableGlobal: true?