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

For others looking back at this, there's another approach in your <code class="notrans

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clip

Customizing variant styles through theme file about notistack HOT 4 CLOSED

iamhosseindhv commented on May 18, 2024

Customizing variant styles through theme file

from notistack.

Comments (4)

JonKrone commented on May 18, 2024 1

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
      }
    },
}

from notistack.

butchmarshall commented on May 18, 2024

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));

from notistack.

xtgrant commented on May 18, 2024

@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.

from notistack.

JalDEV commented on May 18, 2024

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

from notistack.

Recommend Projects