From 02e1663fb216addf22a8644ac49249c846c96b0e Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 12 Sep 2024 19:53:19 +0700
Subject: [PATCH] switch to CSS variable

---
 .../mui-material/src/IconButton/IconButton.js | 24 +++++++------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js
index 40e8640c762f19..780a3ff72d3d19 100644
--- a/packages/mui-material/src/IconButton/IconButton.js
+++ b/packages/mui-material/src/IconButton/IconButton.js
@@ -57,10 +57,11 @@ const IconButtonRoot = styled(ButtonBase, {
       {
         props: (props) => !props.disableRipple,
         style: {
+          '--IconButton-hoverBg': theme.vars
+            ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})`
+            : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
           '&:hover': {
-            backgroundColor: theme.vars
-              ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})`
-              : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+            backgroundColor: 'var(--IconButton-hoverBg)',
             // Reset on touch devices, it doesn't add specificity
             '@media (hover: none)': {
               backgroundColor: 'transparent',
@@ -113,20 +114,11 @@ const IconButtonRoot = styled(ButtonBase, {
       ...Object.entries(theme.palette)
         .filter(createSimplePaletteValueFilter()) // check all the used fields in the style below
         .map(([color]) => ({
-          props: (props) => props.color === color && !props.disableRipple,
+          props: { color },
           style: {
-            '&:hover': {
-              backgroundColor: theme.vars
-                ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})`
-                : alpha(
-                    (theme.vars || theme).palette[color].main,
-                    theme.palette.action.hoverOpacity,
-                  ),
-              // Reset on touch devices, it doesn't add specificity
-              '@media (hover: none)': {
-                backgroundColor: 'transparent',
-              },
-            },
+            '--IconButton-hoverBg': theme.vars
+              ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})`
+              : alpha((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity),
           },
         })),
       {