fix: move hover none override to last

mui · Apr 18, 2024 · e456a0f · e456a0f
1 parent 6b276aa
commit e456a0f
Showing 1 changed file with 18 additions and 23 deletions.
diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js
@@ -48,15 +48,6 @@ const RadioRoot = styled(SwitchBase, {
     color: (theme.vars || theme).palette.action.disabled,
   },
   variants: [
-    {
-      props: { disableRipple: false },
-      style: {
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent',
-        },
-      },
-    },
     {
       props: { color: 'default', disableRipple: false },
       style: {
@@ -67,13 +58,9 @@ const RadioRoot = styled(SwitchBase, {
         },
       },
     },
-    ...Object.keys((theme.vars || theme).palette)
-      .filter((key) =>
-        theme.vars
-          ? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel
-          : theme.palette[key].main,
-      )
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette.main)
+      .map(([color]) => ({
         props: { color, disableRipple: false },
         style: {
           '&:hover': {
@@ -83,20 +70,28 @@ const RadioRoot = styled(SwitchBase, {
           },
         },
       })),
-    ...Object.keys((theme.vars || theme).palette)
-      .filter((key) =>
-        theme.vars
-          ? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel
-          : theme.palette[key].main,
-      )
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette.main)
+      .map(([color]) => ({
         props: { color },
         style: {
           [`&.${radioClasses.checked}`]: {
             color: (theme.vars || theme).palette[color].main,
           },
         },
       })),
+    {
+      // Should be last to override other colors
+      props: { disableRipple: false },
+      style: {
+        // Reset on touch devices, it doesn't add specificity
+        '&:hover': {
+          '@media (hover: none)': {
+            backgroundColor: 'transparent',
+          },
+        },
+      },
+    },
   ],
 }));