Customizing variant styles through theme file

[yTakkar]

Is there any way I can customize variant styles through Material UI's theme file.

You know something like this..

SnackbarItem: {
  variantError: {
    backgroundColor: 'red'
  },
  variantWarning: {
    backgroundColor: 'orange'
  }   
},

Have a good day :)

[butchmarshall]

I did something like this. I'd like to know if you found a better solution!

const snackbarClasses = Object.keys(classes).filter(key => key.match(/^MuiSnackbarContent_/)).reduce(
    (result, key, index) => {
        result[key.replace(/^MuiSnackbarContent_/, '')] = classes[key];
        return result;
    },
    {}
);

<SnackbarProvider
    classes={snackbarClasses}
/>

const themeStyles = (theme) => {
	const {
		overrides = {}
	} = theme,
	{
		MuiSnackbarContent = {}
	} = overrides;

	return Object.keys(MuiSnackbarContent).reduce(
		(result, key, index) => {
			result["MuiSnackbarContent_"+key] = MuiSnackbarContent[key];

			return result;
		},
		{}
	);
};

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(withStyles(themeStyles)(App));

[xtgrant]

@yTakkar
Did you ever end up finding a solution? I am currently looking to them my snackbars as well. Would love to hear what you have found out!
Thanks.

[JalDEV]

<ThemeProvider theme={theme}>
  <SnackbarProvider classes={theme.overrides.MuiSnackbarContent} maxSnack={3}>
     {children}
  </SnackbarProvider>
</ThemeProvider>

[JonKrone]

For others looking back at this, there's another approach in your theme.overrides:

overrides: {
    MuiSnackbarContent: {
      root: {
        '&[class*="variantInfo"]': {
          backgroundColor: <Your color here>
        },
        // .. and etc for the other variants
      }
    },
}