notistack doesn't work well with createGenerateClassName in StylesProvider

dhythm commented 3 years ago

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.

output

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

Put StylesProvider in Material-ui with generateClassName
Put SnackbarProvider in notistack
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 commented 3 years ago

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 commented 3 years ago

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

dhythm commented 3 years ago

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 commented 3 years ago

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 :)

timonweber commented 3 years ago

We are experiencing the same issue. I guess it has something to do with the latest changes to src/SnackbarContainer.tsx (https://github.com/iamhosseindhv/notistack/commit/f188d2bdcd18711ac96b0d5fd2c48a6953ad3738). 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:

https://github.com/iamhosseindhv/notistack/blob/f188d2bdcd18711ac96b0d5fd2c48a6953ad3738/src/SnackbarContainer.tsx#L7-L10

TrejGun commented 3 years ago

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

iamhosseindhv / notistack