Notistack: Classes api doesn't work in SnackbarProvider

[jvvolkart]

I'm trying to use the SnackbarProvider class api but it says expect a string instead of an object as shown in the documentation.

Expected Behavior

The class api should accept an object to style but it only accepts string.
(* I think there is an error with the variable name: styles/classes in the documentation)

Current Behavior

An error appears when trying to send an object into classes.
Image of error below

Steps to Reproduce

1. Install notistack
2. Install Typescript in project (I don't test with JS)
3. Use classes api in SnackbarProvider

Your Environment

| Tech | Version |
|--------------|---------|
| Notistack | v0.9.3 |
| React | v16.10.1 |
| Browser | Chrome v77.0.3865.90 64bits |
| TypeScript | v3.6.3 |

[iamhosseindhv]

you can access classes prop using material-ui's withStyles HOC or makeStyles hook.

Approach 1: HOC:

import React from 'react';
import { withStyles } from '@material-ui/core/styles';

const styles = {
    success: { backgroundColor: 'purple' },
    error: { backgroundColor: 'blue' },
    warning: { backgroundColor: 'green' },
    info: { backgroundColor: 'yellow' },
};


const App = (props) => (
    const { classes } = props;
    // .. your app
)

export default withStyles(styles)(App);

Approach 2: hooks:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
    success: { backgroundColor: 'purple' },
    error: { backgroundColor: 'blue' },
    warning: { backgroundColor: 'green' },
    info: { backgroundColor: 'yellow' },
});


const App = (props) => (
    const classes = useStyles();
    // .. your app
)

export default App;

[jvvolkart]

Not working yet, do you have any project examples that this is working? (I tried your example in many different ways before coming here again)

I created this repository so you can test there, and show me if I'm doing something wrong:
Link of repository here

[iamhosseindhv]

import React from 'react';
import Component from './component';
import { SnackbarProvider } from 'notistack';
import { makeStyles } from '@material-ui/core/styles';

function App() {

  const useStyles = makeStyles(theme => ({
    success: { backgroundColor: 'purple' },
    error: { backgroundColor: 'blue' },
    warning: { backgroundColor: 'green' },
    info: { backgroundColor: 'yellow' },
  }));

  const classes = useStyles();

  return (
    <SnackbarProvider 
        classes={{ 
            variantSucess: classes.success, 
            variantError: classes.error, 
            // ...
        }}>
      <Component />
    </SnackbarProvider>
  );
}

export default App;

[jayellos]

@iamhosseindhv I can't make it to work. I followed the above code for SnackbarProvider. Below is the code to enqueue snackbar using custom variant, but is uses the default background color.

enqueueSnackbar('Custom success snackbar.', { variant: 'variantSuccess', persist: true })

[iamhosseindhv]

@jayellos Almost there, you're using incorrect variant:

enqueueSnackbar('Custom success snackbar', {
    variant: 'success', // or variant: warning | error | info
    persist: true,
    // ...
})

[picosam]

I'm sorry but the above does indeed not work. Classes are never attached to the generated component and therefore colors are not overrides.

[iamhosseindhv]

Your specific issue was passing incorrect variant, but coincidentally there was a bug in the latest release (v0.9.10) which affected you. This is now fixed in v0.9.11, appreciate if you could confirm.

[picosam]

Yes, I confirm. Thank you very much.

[jamsmd]

Hi,

This doesn't work for me when I'm using a custom snackbar as stated in https://iamhosseindhv.com/notistack/demos#custom-snackbar.

Also this page says that Notistack is exporting a Snackbarcontent component that you could use as a base to your custom snackbar but the Snackbarcontent that is being exported is a type not a component...

This is how my test custom snackbar looks:

const SnackBar = forwardRef(({ message }, ref) => (
    <div ref={ ref }>
        { message }
    </div>
));

When I leave the content prop out on SnackbarProviderto use the default snackbars, the styles overriding works but as soon as I put back content to use my custom snackbar it doesn't work any more..

content={ (key, message) => (
    <SnackBar id={ key } message={ message } />
) }

Any suggestions?