Fix bug where classes prop was not applied to material-io Snackbar component.

Author: iamhosseindhv

src/SnackbarItem/SnackbarItem.js

@@ -9,6 +9,7 @@ import {
     capitalise,
     defaultAnchorOrigin,
     getTransitionDirection,
+    muiClasses,
     TransitionComponent,
     variantIcon,
 } from './SnackbarItem.util';
@@ -66,13 +67,14 @@ class SnackbarItem extends Component {
                 {...other}
                 {...singleSnackProps}
                 open={snack.open}
+                classes={muiClasses(classes)}
                 onClose={this.handleClose(key)}
                 onExited={() => onExited(key)}
             >
                 <SnackbarContent
                     variant="subtitle1"
                     className={classNames(
-                        classes.root,
+                        classes.base,
                         classes[`variant${capitalise(variant)}`],
                         className,
                     )}

src/SnackbarItem/SnackbarItem.styles.js

@@ -6,7 +6,8 @@ import {
 } from '../utils/constants';
 
 const styles = theme => ({
-    root: {
+    root: {},
+    base: {
         fontSize: '0.875rem',
         lineHeight: '1.46429em',
         fontWeight: theme.typography.fontWeightRegular,

src/SnackbarItem/SnackbarItem.util.js

@@ -36,6 +36,8 @@ const InfoIcon = props => (
     </SvgIcon>
 );
 
+const TransitionComponent = props => <Slide {...props} />;
+
 const variantIcon = {
     success: <CheckIcon />,
     warning: <WarningIcon />,
@@ -55,21 +57,52 @@ const defaultAnchorOrigin = {
     horizontal: 'left',
 };
 
+const notistackClasses = [
+    'base',
+    'variantSuccess',
+    'variantError',
+    'variantInfo',
+    'variantWarning',
+    'message',
+    'iconVariant',
+];
+
+/**
+ * returns transition direction according the the given anchor origin
+ * @param {object} anchorOrigin
+ */
 const getTransitionDirection = (anchorOrigin = defaultAnchorOrigin) => {
     if (anchorOrigin.horizontal !== 'center') {
         return DIRECTION[anchorOrigin.horizontal];
     }
     return DIRECTION[anchorOrigin.vertical];
 };
 
-const capitalise = string => string.charAt(0).toUpperCase() + string.slice(1);
+/**
+ * Capitalises a piece of string
+ * @param {string} text
+ */
+const capitalise = text => text.charAt(0).toUpperCase() + text.slice(1);
 
-const TransitionComponent = props => <Slide {...props} />;
+/**
+ * Filteres classes object and returns the keys that are allowed
+ * in material-ui snackbar classes prop
+ * @param {object} classes
+ */
+const muiClasses = classes => (
+    Object.keys(classes)
+        .filter(key => !notistackClasses.includes(key))
+        .reduce((obj, key) => ({
+            ...obj,
+            [key]: classes[key],
+        }), {})
+);
 
 export {
     capitalise,
     defaultAnchorOrigin,
     getTransitionDirection,
+    muiClasses,
     TransitionComponent,
     variantIcon,
 };