Remove the need to use !important to customise variants (#385)

* Remove the need for people to use !important to customise variants * Update CHANGELOG * 1.0.9
iamhosseindhv · May 19, 2021 · 066cb52 · 066cb52
1 parent f1e1e76
commit 066cb52
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 Thanks to all contributers who improved notistack by opening an issue/PR.
 
+### `[email protected]`
+###### May 19, 2021
+* **@SimonAmphora** Remove the need to use `!important` to customise variant styles [#215 (comment)](https://github.com/iamhosseindhv/notistack/issues/215#issuecomment-700060481) 
+
+<br />
+
 ### `[email protected]`
 ###### May 18, 2021
 * **@angeshpc91** Fixes issues with centered snackbars on xs screen sizes [#380](https://github.com/iamhosseindhv/notistack/issues/380) 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "notistack",
-    "version": "1.0.8",
+    "version": "1.0.9",
     "description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
     "main": "dist/index.js",
     "module": "dist/notistack.esm.js",

diff --git a/src/SnackbarItem/SnackbarItem.tsx b/src/SnackbarItem/SnackbarItem.tsx
@@ -17,33 +17,33 @@ const styles = (theme: Theme) => {
     const backgroundColor = emphasize(theme.palette.background.default, mode === 'light' ? 0.8 : 0.98);
     return createStyles({
         ...allClasses.mui,
+        contentRoot: {
+            ...theme.typography.body2,
+            backgroundColor,
+            color: theme.palette.getContrastText(backgroundColor),
+            alignItems: 'center',
+            padding: '6px 16px',
+            borderRadius: '4px',
+            boxShadow: '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',
+        },
         lessPadding: {
             paddingLeft: 8 * 2.5,
         },
         variantSuccess: {
-            backgroundColor: '#43a047 !important', // green
-            color: '#fff !important',
+            backgroundColor: '#43a047', // green
+            color: '#fff',
         },
         variantError: {
-            backgroundColor: '#d32f2f !important', // dark red
-            color: '#fff !important',
+            backgroundColor: '#d32f2f', // dark red
+            color: '#fff',
         },
         variantInfo: {
-            backgroundColor: '#2196f3 !important', // nice blue
-            color: '#fff !important',
+            backgroundColor: '#2196f3', // nice blue
+            color: '#fff',
         },
         variantWarning: {
-            backgroundColor: '#ff9800 !important', // amber
-            color: '#fff !important',
-        },
-        contentRoot: {
-            ...theme.typography.body2,
-            backgroundColor,
-            color: theme.palette.getContrastText(backgroundColor),
-            alignItems: 'center',
-            padding: '6px 16px',
-            borderRadius: '4px',
-            boxShadow: '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',
+            backgroundColor: '#ff9800', // amber
+            color: '#fff',
         },
         message: {
             display: 'flex',