Allow overriding styles of Material Snackbar (#545)

* Pass className down to snackbar content * Add MuiContent-variant classname * Export MaterialDesignContent component * Update typedocs * Minor
iamhosseindhv · Mar 5, 2023 · e9772a2 · e9772a2
1 parent 4014a05
commit e9772a2
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 4 deletions.
diff --git a/examples/custom-snackbar-example-2/src/ReportComplete.tsx b/examples/custom-snackbar-example-2/src/ReportComplete.tsx
@@ -20,7 +20,6 @@ const useStyles = makeStyles(() => ({
     }
   },
   card: {
-    backgroundColor: "#fddc6c",
     width: "100%"
   },
   typography: {
@@ -76,7 +75,7 @@ const ReportComplete = forwardRef<HTMLDivElement, ReportCompleteProps>(
 
     return (
       <SnackbarContent ref={ref} className={classes.root}>
-        <Card className={classes.card}>
+        <Card className={classes.card} style={{ backgroundColor: "#fddc6c" }}>
           <CardActions classes={{ root: classes.actionRoot }}>
             <Typography variant="body2" className={classes.typography}>
               {props.message}

diff --git a/src/index.ts b/src/index.ts
@@ -2,3 +2,4 @@ export { default as SnackbarProvider, enqueueSnackbar, closeSnackbar } from './S
 export { default as SnackbarContent } from './SnackbarContent';
 export { default as useSnackbar } from './useSnackbar';
 export { default as Transition } from './transitions/Transition';
+export { default as MaterialDesignContent } from './ui/MaterialDesignContent';
diff --git a/src/types.ts b/src/types.ts
@@ -424,3 +424,7 @@ export declare const SnackbarContent: (
 ) => React.ReactElement<any, any>;
 
 export declare const Transition: React.JSXElementConstructor<TransitionComponentProps>;
+
+export declare const MaterialDesignContent: (
+    props: CustomContentProps & React.RefAttributes<HTMLDivElement>
+) => React.ReactElement<any, any>;
diff --git a/src/ui/MaterialDesignContent/MaterialDesignContent.tsx b/src/ui/MaterialDesignContent/MaterialDesignContent.tsx
@@ -50,7 +50,16 @@ const classes = makeStyles({
 });
 
 const MaterialDesignContent = forwardRef<HTMLDivElement, CustomContentProps>((props, forwardedRef) => {
-    const { id, message, action: componentOrFunctionAction, iconVariant, variant, hideIconVariant, style } = props;
+    const {
+        id,
+        message,
+        action: componentOrFunctionAction,
+        iconVariant,
+        variant,
+        hideIconVariant,
+        style,
+        className,
+    } = props;
 
     const icon = iconVariant[variant];
 
@@ -66,9 +75,11 @@ const MaterialDesignContent = forwardRef<HTMLDivElement, CustomContentProps>((pr
             style={style}
             className={clsx(
                 ComponentClasses.MuiContent,
+                ComponentClasses.MuiContentVariant(variant),
                 classes.root,
                 { [classes.lessPadding]: !hideIconVariant && icon },
-                classes[variant]
+                classes[variant],
+                className
             )}
         >
             <div id="notistack-snackbar" className={classes.message}>

diff --git a/src/utils/styles.ts b/src/utils/styles.ts
@@ -17,4 +17,5 @@ export const ComponentClasses = {
     Snackbar: 'notistack-Snackbar',
     CollapseWrapper: 'notistack-CollapseWrapper',
     MuiContent: 'notistack-MuiContent',
+    MuiContentVariant: (variant: string) => `notistack-MuiContent-${variant}`,
 };
diff --git a/typedoc.json b/typedoc.json
@@ -8168,6 +8168,98 @@
 				}
 			}
 		},
+		{
+			"id": 333,
+			"name": "MaterialDesignContent",
+			"kind": 32,
+			"kindString": "Variable",
+			"flags": {
+				"isExported": true,
+				"isConst": true
+			},
+			"sources": [
+				{
+					"fileName": "src/types.ts",
+					"line": 428,
+					"character": 42
+				}
+			],
+			"type": {
+				"type": "reflection",
+				"declaration": {
+					"id": 334,
+					"name": "__type",
+					"kind": 65536,
+					"kindString": "Type literal",
+					"flags": {
+						"isExported": true
+					},
+					"signatures": [
+						{
+							"id": 335,
+							"name": "__call",
+							"kind": 4096,
+							"kindString": "Call signature",
+							"flags": {
+								"isExported": true
+							},
+							"parameters": [
+								{
+									"id": 336,
+									"name": "props",
+									"kind": 32768,
+									"kindString": "Parameter",
+									"flags": {
+										"isExported": true
+									},
+									"type": {
+										"type": "intersection",
+										"types": [
+											{
+												"type": "reference",
+												"id": 321,
+												"name": "CustomContentProps"
+											},
+											{
+												"type": "reference",
+												"typeArguments": [
+													{
+														"type": "reference",
+														"name": "HTMLDivElement"
+													}
+												],
+												"name": "RefAttributes"
+											}
+										]
+									}
+								}
+							],
+							"type": {
+								"type": "reference",
+								"typeArguments": [
+									{
+										"type": "intrinsic",
+										"name": "any"
+									},
+									{
+										"type": "intrinsic",
+										"name": "any"
+									}
+								],
+								"name": "ReactElement"
+							}
+						}
+					],
+					"sources": [
+						{
+							"fileName": "src/types.ts",
+							"line": 428,
+							"character": 43
+						}
+					]
+				}
+			}
+		},
 		{
 			"id": 328,
 			"name": "SnackbarContent",
@@ -8473,6 +8565,7 @@
 			"title": "Variables",
 			"kind": 32,
 			"children": [
+				333,
 				328,
 				332,
 				327,