Notistack: Custom variant don't work anymore

[joepsyko]

The following code was working before version 1.0.0.

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


<SnackbarProvider
    classes={{
        variantSuccess: classes.success,
        variantError: classes.error,
        variantWarning: classes.warning,
        variantInfo: classes.info,
    }}
>
    <App />
</SnackbarProvider>

To make it work I have to add "!important" after the colour property:

success: { backgroundColor: 'purple !important' }

Is this a bug?

[pavelLyolya]

Facing same issue

[parveen1112]

Yes, I am also facing the same issue and had to use. Important to make it work.

[diospada]

Please look at https://github.com/iamhosseindhv/notistack/pull/297

[joepsyko]

Please look at #297

I think we are talking about two different things, I found that code in the documentation and it was working before version 1.0.0. Now it doesn't work anymore so I think there is a regression/bug.

In this commit you can see that "!important" was added in the default colours:
https://github.com/iamhosseindhv/notistack/pull/297/files#diff-4ac32a78649ca5bdd8e0ba38b7006a1e

[parveen1112]

I agree with @joepsyko.

If I go the documentation
https://iamhosseindhv.com/notistack/demos#custom-variants
I am not able to use this as shown. I have to mark backgroundColor or color as important.

Any specific reason for marking this important ?

variantSuccess: { backgroundColor: '#43a047 !important', // green color: '#fff !important', }, variantError: { backgroundColor: '#d32f2f !important', // dark red color: '#fff !important', }, variantInfo: { backgroundColor: '#2196f3 !important', // nice blue color: '#fff !important', }, variantWarning: { backgroundColor: '#ff9800 !important', // amber color: '#fff !important', },

[iamhosseindhv]

I have tested locally, but reverting https://github.com/iamhosseindhv/notistack/pull/297/files#diff-4ac32a78649ca5bdd8e0ba38b7006a1e and removing !important from styles doesn't fix the problem. We still have to pass !important to override styles.

Happy to quickly publish a patch if anyone investigates and comes up with a PR. But for now overriding using !important is the solution.

[SimonAmphora]

However, I'm facing the same issue where my new styles are not taking effect due to the !important flag in the snackbarItem styles:

.SnackbarItem-variantSuccess-380 {
    color: #fff !important;
    background-color: #43a047 !important;
}

you can see an example here:
https://codesandbox.io/s/nice-kapitsa-0k7go?file=/SnackbarProvider2.js
The top row of buttons is using standard styles, the second row is using styles with !important

[iamhosseindhv]

This is regression and can be fixed by adding !important. I'm happy to apply a fix if someone is willing to dig more into it.

[fveauvy]

This is regression and can be fixed by adding !important. I'm happy to apply a fix if someone is willing to dig more into it.

Could it be added to the documentation ?