[TreeView] Fix alpha usage with CSS variables (#14969)

Signed-off-by: Kilian <wangkailang@users.noreply.github.com> Signed-off-by: Lukas Tyla <llukas.tyla@gmail.com> Co-authored-by: Lukas Tyla <llukas.tyla@gmail.com>
mui · Oct 16, 2024 · edce4a4 · edce4a4
1 parent ee3626f
commit edce4a4
Showing 1 changed file with 21 additions and 7 deletions.
diff --git a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx
@@ -24,26 +24,36 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
       style: {
         marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
         borderRadius: theme.shape.borderRadius,
-        backgroundColor: alpha((theme.vars || theme).palette.primary.dark, 0.15),
+        backgroundColor: theme.vars
+          ? `rgba(${theme.vars.palette.primary.dark} / ${0.15})`
+          : alpha(theme.palette.primary.dark, 0.15),
       },
     },
     {
       props: { action: 'reorder-above' },
       style: {
         marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-        borderTop: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`,
+        borderTop: theme.vars
+          ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})`
+          : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`,
         ...theme.applyStyles('dark', {
-          borderTopColor: alpha((theme.vars || theme).palette.grey[100], 0.6),
+          borderTopColor: theme.vars
+            ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})`
+            : alpha(theme.palette.grey[100], 0.6),
         }),
       },
     },
     {
       props: { action: 'reorder-below' },
       style: {
         marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-        borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`,
+        borderBottom: theme.vars
+          ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})`
+          : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`,
         ...theme.applyStyles('dark', {
-          borderBottomColor: alpha((theme.vars || theme).palette.grey[100], 0.6),
+          borderBottomColor: theme.vars
+            ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})`
+            : alpha(theme.palette.grey[100], 0.6),
         }),
       },
     },
@@ -52,9 +62,13 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
       style: {
         marginLeft:
           'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))' as any,
-        borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`,
+        borderBottom: theme.vars
+          ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})`
+          : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`,
         ...theme.applyStyles('dark', {
-          borderBottomColor: alpha((theme.vars || theme).palette.grey[900], 0.6),
+          borderBottomColor: theme.vars
+            ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})`
+            : alpha(theme.palette.grey[100], 0.6),
         }),
       },
     },