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?

[pavelliolia]

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 #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 ?

            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 ?

[iamhosseindhv]

As of v1.0.9, you do not need to use !important anymore.