- differences from MUI 3 to MUI 4

AmerTm · Jun 13, 2019 · 05727f4 · 05727f4
1 parent 6ec78a4
commit 05727f4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/src/assets/jss/material-kit-react/components/customTabsStyle.jsx b/src/assets/jss/material-kit-react/components/customTabsStyle.jsx
@@ -47,7 +47,10 @@ const customTabsStyle = {
     maxHeight: "unset !important",
     "& > svg": {
       verticalAlign: "middle",
-      margin: "-1px 5px 0 0"
+      margin: "-1.55px 5px 0 0 !important"
+    },
+    "&,& *": {
+      letterSpacing: "normal !important"
     }
   }
 };

diff --git a/src/assets/jss/material-kit-react/components/navPillsStyle.jsx b/src/assets/jss/material-kit-react/components/navPillsStyle.jsx
@@ -31,7 +31,7 @@ const navPillsStyle = theme => ({
     display: "none !important"
   },
   fixed: {
-    overflowX: "visible"
+    overflow: "visible !important"
   },
   horizontalDisplay: {
     display: "block"
@@ -58,7 +58,10 @@ const navPillsStyle = theme => ({
     width: "30px",
     height: "30px",
     display: "block",
-    margin: "15px 0"
+    margin: "15px 0 !important",
+    "&, & *": {
+      letterSpacing: "normal !important"
+    }
   },
   horizontalPills: {
     width: "100%",
@@ -121,6 +124,17 @@ const navPillsStyle = theme => ({
   alignCenter: {
     alignItems: "center",
     justifyContent: "center"
+  },
+  tabWrapper: {
+    color: "inherit",
+    position: "relative",
+    fontSize: "12px",
+    lineHeight: "24px",
+    fontWeight: "500",
+    textTransform: "uppercase",
+    "&,& *": {
+      letterSpacing: "normal"
+    }
   }
 });
 

diff --git a/src/components/NavPills/NavPills.jsx b/src/components/NavPills/NavPills.jsx
@@ -71,7 +71,8 @@ class NavPills extends React.Component {
               {...icon}
               classes={{
                 root: pillsClasses,
-                selected: classes[color]
+                selected: classes[color],
+                wrapper: classes.tabWrapper
               }}
             />
           );