[TimelineDot] Add support for CSS variables (mui#34003)

add support for CSS variables in TimelineDot component
daniel-rabe · Nov 29, 2022 · 5820f26 · 5820f26
1 parent a340715
commit 5820f26
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/packages/mui-lab/src/TimelineDot/TimelineDot.js b/packages/mui-lab/src/TimelineDot/TimelineDot.js
@@ -37,19 +37,19 @@ const TimelineDotRoot = styled('span', {
   borderWidth: 2,
   padding: 4,
   borderRadius: '50%',
-  boxShadow: theme.shadows[1],
+  boxShadow: (theme.vars || theme).shadows[1],
   margin: '11.5px 0',
   ...(ownerState.variant === 'filled' && {
     borderColor: 'transparent',
     ...(ownerState.color !== 'inherit' && {
       ...(ownerState.color === 'grey'
         ? {
-            color: theme.palette.grey[50],
-            backgroundColor: theme.palette.grey[400],
+            color: (theme.vars || theme).palette.grey[50],
+            backgroundColor: (theme.vars || theme).palette.grey[400],
           }
         : {
-            color: theme.palette[ownerState.color].contrastText,
-            backgroundColor: theme.palette[ownerState.color].main,
+            color: (theme.vars || theme).palette[ownerState.color].contrastText,
+            backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
           }),
     }),
   }),
@@ -59,10 +59,10 @@ const TimelineDotRoot = styled('span', {
     ...(ownerState.color !== 'inherit' && {
       ...(ownerState.color === 'grey'
         ? {
-            borderColor: theme.palette.grey[400],
+            borderColor: (theme.vars || theme).palette.grey[400],
           }
         : {
-            borderColor: theme.palette[ownerState.color].main,
+            borderColor: (theme.vars || theme).palette[ownerState.color].main,
           }),
     }),
   }),