console error when styling variantDefault

[intergalactic-overlords]

When styling variantDefault by using material ui classes, I get the following error in the console:

Warning: Material-UI: the key `variantDefault` provided to the classes property is not implemented in SnackbarItem. You can only override one of the following: root,anchorOriginTopCenter,anchorOriginBottomCenter,anchorOriginTopRight,anchorOriginBottomRight,anchorOriginTopLeft,anchorOriginBottomLeft,base,lessPadding,variantSuccess,variantError,variantInfo,variantWarning,message.

The snackbar receives styling, so it works, but somehow the error is thrown.

Expected Behavior

styled default snackbar and no errors

Current Behavior

styled default snackbar and errors

Steps to Reproduce

Link: https://codesandbox.io/s/2014qr4vvn

1. add variantDefault to the classes property of SnackbarProvider
2. run the code in the browser and look at the console

Context

I'm trying to style the default snackbar. And I don't want errors in my console.

Your Environment

Tech	Version
Notistack	v0.5.0
React	16.7.0
Browser	Firefox & Chrome

[iamhosseindhv]

@intergalactic-overlords notistack classes props doesn't have key variantDefault. You can use material-ui classes keys for styling normal snackbars (the ones with default variant).

You can see a full list of available keys here: https://material-ui.com/api/snackbar/#css

[intergalactic-overlords]

But variantSuccess, variantError, variantInfo, variantWarning are not mentioned as well on that material-ui page and it is possible to use them.
And when I use variantDefault, it's possible to change the styling (see the codesandbox). Or am I missing something here?

[intergalactic-overlords]

Ok, I understand now. When adding variantDefault, it somehow adds that class, and I am somehow possible to use it (material ui magic??), but it throws an error. But I should actually use base.

[iamhosseindhv]

The ability to have different variants is something that notistack has added to material-ui snackbars. material-ui doesn't provide a high level api for this and they're focued on providing low level apis for all of their components.
That's the reason variantSuccess, variantError, variantInfo and variantWarning keys are not documented in their website. They're however documented in notistack docs.

If a snackbar is not of variant success, info, error or warning, then it's just a normal snackbar. In that case you can use the low level api provided by material-ui. (https://material-ui.com/api/snackbar/#css)

this line makes variantDefault work cause you're passing the styles associated with it. but since this can already be achieved by material-ui classes, we don't have such a key called variantDefault.

You should probably use the root key.

classes={{
    root: classes.yourStylings,
}}

[dalborgo]

classes={{
    root: classes.myRedBackgroundColor
}}

I have tried to change the "default variant" background color.

But I get this effect... (it's during the "to left" transition)

It doesn't seem to apply to the SnackBarContent.

[iamhosseindhv]

have you tried passing classes through ContentProps? @dalborgo

ContentProps={
    classes={{ root: classes.myRedBackgroundColor }}
}

[dalborgo]

Ty @iamhosseindhv

This works.
ContentProps={ { classes: { root: classes.myRedBackgroundColor } } }

The only problem is that rule overrides the other variant styles.

I didn't find a way to set a red background as default and a black for the 'error' one.

[iamhosseindhv]

how about this one? @dalborgo

ContentProps={{ 
    classes: {
        root: classes.myRedBackgroundColor,
        variantError: classes.yourBlackgroundColor,
    } 
}}