SnackbarItem background style not applied

[madaz]

The <SnackbarItem/> variant background-color is not been applied because the MuiPaper-root class is overriding in my application.

This is because of the jss <style> tag injection order where the MuiPaper styles are injected after the ` styles

As mentioned here https://stackoverflow.com/questions/49180192/how-to-specify-the-order-in-which-the-style-sheets-appear-in-the-document

More info https://cssinjs.org/jss-api/?v=v10.0.0#attach-style-sheets-in-a-specific-order

material-ui uses a default negative incremented index counter. https://github.com/mui-org/material-ui/blob/master/packages/material-ui-styles/src/makeStyles/indexCounter.js which is defaults to if no index is passed in https://github.com/mui-org/material-ui/blob/master/packages/material-ui-styles/src/makeStyles/makeStyles.js#L197

Expected Behavior

<SnackbarItem/> variants should style with background-color

Current Behavior

Cascading style rules MuiPaper overriding

Style tags incorrect order

Proposal

Enforce notistack styles to come after Mui style tags...or at least provide a way to pass in options in the SnackbarProvider.

As a test, I got it working locally by adding { index: 1 } to the withStyles node_modules\notistack\build\SnackbarItem\SnackbarItem.js

exports.default = (0, _styles.withStyles)(_SnackbarItem3.default, { index: 1 })(SnackbarItem);

(or /src/SnackbarItem/SnackbarItem.js)

export default withStyles(styles, { index: 1 })(SnackbarItem);

snackbaritem styles last

Your Environment

Tech	Version
Notistack	v0.9.6
React	16.12.0
Browser	Chrome
OS	Windows 10
@material-ui/core	4.7.1

[iamhosseindhv]

Thanks for reporting this. @madaz

This has been fixed and will be published in the next version release.

[kepamuk]

Thanks for reporting this. @madaz

This has been fixed and will be published in the next version release.

still not work in 0.9.7