notistack doesn't work well with createGenerateClassName in StylesProvider

[dhythm]

Hello, notistack is a great library. It helps us a lot.
Anyway, I found that notistack styles look broken if I use createGenerateClassName with Material-UI's StylesProvider.

margins are gone and the action button cannot be clicked.

Expected Behavior

snackbars have proper margins and enable to click the button.

Current Behavior

The snackbars cannot be clicked and shown closely with the prev/next stackbars.

Steps to Reproduce

1. Put StylesProvider in Material-ui with generateClassName
2. Put SnackbarProvider in notistack
3. enqueue a snackbar

ReactDOM.render(
  <React.StrictMode>
    <StylesProvider
      generateClassName={createGenerateClassName({ seed: "my" })}
    >
      <SnackbarProvider>
        <MuiThemeProvider theme={theme}>
          <App />
        </MuiThemeProvider>
      </SnackbarProvider>
    </StylesProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Context

It worked well in v0.9.17.
And also it works well in v1.0.9 when I move SnackbarProvider to outside of StylesProvider.

ReactDOM.render(
  <React.StrictMode>
    <SnackbarProvider>
      <StylesProvider
        generateClassName={createGenerateClassName({ seed: "my" })}
      >
        <MuiThemeProvider theme={theme}>
          <App />
        </MuiThemeProvider>
      </StylesProvider>
   </SnackbarProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Your Environment

Tech	Version
Notistack	v1.0.9
React	17.0.2
Browser	Google Chrome
etc.

Many thanks!

[michael-land]

I'm experiencing the same problem when pass custom jss instance to StyleProvider.

  const cache = React.useMemo(() => createCache({ key: 'BRAND', container: emotionRoot }), []);
  const jss = React.useMemo(() => create({ ...jssPreset(), insertionPoint: elementRoot }), []);

  return (
    <CacheProvider value={cache}>
      <StylesProvider jss={jss} injectFirst>
        <ThemeProvider theme={theme}>
          <SnackbarProvider style={{ pointerEvents: 'all' }}>
            <CssBaseline>
              <GlobalStyles styles={{ b: { fontWeight: 600 }, strong: { fontWeight: 600 } }} />
              <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
            </CssBaseline>
          </SnackbarProvider>
        </ThemeProvider>
      </StylesProvider>
    </CacheProvider>
  );

---

My use case is to render the whole react app under shadow root, i have to insert style tag inside the shadow-root instead of the head.

the trick move SnackbarProvider to outside of StylesProvider DOES NOT work in my case

[michael-land]

revert to 1.0.5 works. anything important changed between 1.0.5 and 1.09?

[dhythm]

I found a temporary solution by using custom className.

const useCustomStyles = makeStyles((theme) => ({
  "my-MuiCollapse-container": {
    pointerEvents: "all",
    marginTop: "6px",
    marginBottom: "6px",
  }
})

and

    <SnackbarProvider
      ...
      className={`${useCustomStyles()["my-MuiCollapse-container"]}`}
    >
      {children}
    </SnackbarProvider>

The action button can be clicked and snackbars have 6px margin on the top and the bottom.
However, it seems hacky. So, I'm happy if anyone tells me another solutions 🙏

[Romcol]

Hello,

I have the same issue as you. I use createGenerateClassName as well.

Putting style={{ pointerEvents: 'all' }} on SnackbarProvider fixes the issue for me, or reverting back to 1.0.6 works as well.

I hope this can be fixed in a future version :)

[timonkbd]

We are experiencing the same issue. I guess it has something to do with the latest changes to src/SnackbarContainer.tsx (f188d2b). The deterministic class names from Material UI are now hardcoded into the source, so using custom class names via createGenerateClassName() lead to the described behavior:

notistack/src/SnackbarContainer.tsx

Lines 7 to 10 in f188d2b

	const collapse = {
	container: '& > .MuiCollapse-container',
	wrapper: '& > .MuiCollapse-container > .MuiCollapse-wrapper',
	};

[TrejGun]

We have the same here

the code is pretty much

<ThemeProvider theme={createTheme()}>
    <SnackbarProvider>
        <CssBaseline />
        <div />
    </SnackbarProvider>
</ThemeProvider>

no createGenerateClassName no custom jss stuff

have to revert to 1.0.6 for now