From 066cb52f2c8cbdd57e1ba9c4f7937d0d603f5e50 Mon Sep 17 00:00:00 2001
From: Hossein Dehnokhalaji <hossein.dehnavi98@yahoo.com>
Date: Wed, 19 May 2021 20:33:44 +0100
Subject: [PATCH] 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
---
 CHANGELOG.md                      |  6 ++++++
 package-lock.json                 |  2 +-
 package.json                      |  2 +-
 src/SnackbarItem/SnackbarItem.tsx | 34 +++++++++++++++----------------
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 10650b86..6e3275ec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 Thanks to all contributers who improved notistack by opening an issue/PR.
 
+### `notistack@1.0.9`
+###### 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 />
+
 ### `notistack@1.0.8`
 ###### 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
index 10aa9d9b..c1b5fe31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "notistack",
-    "version": "1.0.8",
+    "version": "1.0.9",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
diff --git a/package.json b/package.json
index a81d1e15..a2d88e2c 100644
--- 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
index 97ea954b..e7364a38 100644
--- 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',