[Radio] Skip default hover style when disableRipple is set (#34902)

mui · Oct 31, 2022 · d89bb89 · d89bb89
1 parent 9e41c71
commit d89bb89
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 27 deletions.
diff --git a/docs/data/material/components/radio-buttons/CustomizedRadios.js b/docs/data/material/components/radio-buttons/CustomizedRadios.js
@@ -52,11 +52,6 @@ const BpCheckedIcon = styled(BpIcon)({
 function BpRadio(props) {
   return (
     <Radio
-      sx={{
-        '&:hover': {
-          bgcolor: 'transparent',
-        },
-      }}
       disableRipple
       color="default"
       checkedIcon={<BpCheckedIcon />}

diff --git a/docs/data/material/components/radio-buttons/CustomizedRadios.tsx b/docs/data/material/components/radio-buttons/CustomizedRadios.tsx
@@ -52,11 +52,6 @@ const BpCheckedIcon = styled(BpIcon)({
 function BpRadio(props: RadioProps) {
   return (
     <Radio
-      sx={{
-        '&:hover': {
-          bgcolor: 'transparent',
-        },
-      }}
       disableRipple
       color="default"
       checkedIcon={<BpCheckedIcon />}

diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js
@@ -37,24 +37,26 @@ const RadioRoot = styled(SwitchBase, {
   },
 })(({ theme, ownerState }) => ({
   color: (theme.vars || theme).palette.text.secondary,
-  '&:hover': {
-    backgroundColor: theme.vars
-      ? `rgba(${
-          ownerState.color === 'default'
-            ? theme.vars.palette.action.activeChannel
-            : theme.vars.palette[ownerState.color].mainChannel
-        } / ${theme.vars.palette.action.hoverOpacity})`
-      : alpha(
-          ownerState.color === 'default'
-            ? theme.palette.action.active
-            : theme.palette[ownerState.color].main,
-          theme.palette.action.hoverOpacity,
-        ),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent',
+  ...(!ownerState.disableRipple && {
+    '&:hover': {
+      backgroundColor: theme.vars
+        ? `rgba(${
+            ownerState.color === 'default'
+              ? theme.vars.palette.action.activeChannel
+              : theme.vars.palette[ownerState.color].mainChannel
+          } / ${theme.vars.palette.action.hoverOpacity})`
+        : alpha(
+            ownerState.color === 'default'
+              ? theme.palette.action.active
+              : theme.palette[ownerState.color].main,
+            theme.palette.action.hoverOpacity,
+          ),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
     },
-  },
+  }),
   ...(ownerState.color !== 'default' && {
     [`&.${radioClasses.checked}`]: {
       color: (theme.vars || theme).palette[ownerState.color].main,