From edce4a49377ae1bc4d0da6c79e59d0b5999905eb Mon Sep 17 00:00:00 2001
From: Kilian <wangkailang@users.noreply.github.com>
Date: Wed, 16 Oct 2024 18:18:37 +0800
Subject: [PATCH] [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>
---
 .../TreeItem2DragAndDropOverlay.tsx           | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx
index 52294d0cb180e..db551010137a1 100644
--- a/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx
+++ b/packages/x-tree-view/src/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.tsx
@@ -24,16 +24,22 @@ 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),
         }),
       },
     },
@@ -41,9 +47,13 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
       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),
         }),
       },
     },