feat(Tabs): add support for CSS variables

mui · May 2, 2022 · a56b83d · a56b83d
1 parent c919863
commit a56b83d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/packages/mui-material/src/Tab/Tab.js b/packages/mui-material/src/Tab/Tab.js
@@ -85,25 +85,25 @@ const TabRoot = styled(ButtonBase, {
       opacity: 1,
     },
     [`&.${tabClasses.disabled}`]: {
-      opacity: theme.palette.action.disabledOpacity,
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
     },
   }),
   ...(ownerState.textColor === 'primary' && {
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     [`&.${tabClasses.selected}`]: {
-      color: theme.palette.primary.main,
+      color: (theme.vars || theme).palette.primary.main,
     },
     [`&.${tabClasses.disabled}`]: {
-      color: theme.palette.text.disabled,
+      color: (theme.vars || theme).palette.text.disabled,
     },
   }),
   ...(ownerState.textColor === 'secondary' && {
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     [`&.${tabClasses.selected}`]: {
-      color: theme.palette.secondary.main,
+      color: (theme.vars || theme).palette.secondary.main,
     },
     [`&.${tabClasses.disabled}`]: {
-      color: theme.palette.text.disabled,
+      color: (theme.vars || theme).palette.text.disabled,
     },
   }),
   ...(ownerState.fullWidth && {

diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js
@@ -200,10 +200,10 @@ const TabsIndicator = styled('span', {
   width: '100%',
   transition: theme.transitions.create(),
   ...(ownerState.indicatorColor === 'primary' && {
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor: (theme.vars || theme).palette.primary.main,
   }),
   ...(ownerState.indicatorColor === 'secondary' && {
-    backgroundColor: theme.palette.secondary.main,
+    backgroundColor: (theme.vars || theme).palette.secondary.main,
   }),
   ...(ownerState.vertical && {
     height: '100%',