@mui/codemod 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/node/v6.0.0/styled/test-cases/ConditionalStyled.actual.js

@@ -1,10 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["expand"];
 const LinearProgressBar1 = styled('span', {
   name: 'MuiLinearProgress',
   slot: 'Bar1',
@@ -17,19 +13,29 @@ const LinearProgressBar1 = styled('span', {
 })(({
   ownerState,
   theme
-}) => (0, _extends2.default)({}, ownerState.variant === 'buffer' && {
-  backgroundColor: ownerState.color !== 'normal' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].light,
-  '&:hover': (0, _extends2.default)({}, ownerState.color !== 'inherit' ? {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
-  } : {
-    backgroundColor: 'currentColor'
+}) => ({
+  ...(ownerState.variant === 'buffer' && {
+    backgroundColor: ownerState.color !== 'normal' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].light,
+    '&:hover': {
+      ...(ownerState.color !== 'inherit' ? {
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
+      } : {
+        backgroundColor: 'currentColor'
+      })
+    }
+  }),
+  ...(ownerState.variant !== 'buffer' && {
+    backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
   })
-}, ownerState.variant !== 'buffer' && {
-  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
 }));
 const ExpandMore = styled(props => {
-  const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, (0, _extends2.default)({}, other));
+  const {
+    expand,
+    ...other
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+    ...other
+  });
 })(({
   theme,
   expand
@@ -45,19 +51,19 @@ const Main = styled('main', {
 })(({
   disableToc,
   theme
-}) => (0, _extends2.default)({
+}) => ({
   minHeight: '100vh',
   display: 'grid',
-  width: '100%'
-}, disableToc ? {
-  [theme.breakpoints.up('md')]: {
-    marginRight: TOC_WIDTH / 2
-  }
-} : {
-  [theme.breakpoints.up('md')]: {
-    gridTemplateColumns: `1fr ${TOC_WIDTH}px`
-  }
-}, {
+  width: '100%',
+  ...(disableToc ? {
+    [theme.breakpoints.up('md')]: {
+      marginRight: TOC_WIDTH / 2
+    }
+  } : {
+    [theme.breakpoints.up('md')]: {
+      gridTemplateColumns: `1fr ${TOC_WIDTH}px`
+    }
+  }),
   '& .markdown-body .comment-link': {
     display: 'flex'
   }
@@ -70,46 +76,77 @@ const StyledAppContainer = styled(AppContainer, {
   disableToc,
   theme
 }) => {
-  return (0, _extends2.default)({
+  return {
     position: 'relative',
     // By default, a grid item cannot be smaller than the size of its content.
     // https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items
-    minWidth: 0
-  }, disableToc ? {
-    // 105ch ≈ 930px
-    maxWidth: `calc(105ch + ${TOC_WIDTH / 2}px)`
-  } : {
-    // We're mostly hosting text content so max-width by px does not make sense considering font-size is system-adjustable.
-    fontFamily: 'Arial',
-    // 105ch ≈ 930px
-    maxWidth: '105ch'
-  }, !disableAd && (0, _extends2.default)({}, hasTabs ? {
-    '&& .component-tabs .MuiTabs-root': {
-      // 40px matches MarkdownElement h2 margin-top.
-      marginBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT_MOBILE}px + 40px)`,
-      [theme.breakpoints.up('sm')]: {
-        marginBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT}px + 40px)`
-      }
-    },
-    '&& .component-tabs.ad .MuiTabs-root': {
-      marginBottom: 0
-    }
-  } : {
-    '&& .description': {
-      marginBottom: theme.spacing(AD_MARGIN_BOTTOM),
-      paddingBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT_MOBILE}px)`,
-      [theme.breakpoints.up('sm')]: {
-        paddingBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT}px)`
-      }
-    },
-    '&& .description.ad': {
-      paddingBottom: 0,
-      marginBottom: 0
-    }
-  }), {
+    minWidth: 0,
+    ...(disableToc ? {
+      // 105ch ≈ 930px
+      maxWidth: `calc(105ch + ${TOC_WIDTH / 2}px)`
+    } : {
+      // We're mostly hosting text content so max-width by px does not make sense considering font-size is system-adjustable.
+      fontFamily: 'Arial',
+      // 105ch ≈ 930px
+      maxWidth: '105ch'
+    }),
+    ...(!disableAd && {
+      ...(hasTabs ? {
+        '&& .component-tabs .MuiTabs-root': {
+          // 40px matches MarkdownElement h2 margin-top.
+          marginBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT_MOBILE}px + 40px)`,
+          [theme.breakpoints.up('sm')]: {
+            marginBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT}px + 40px)`
+          }
+        },
+        '&& .component-tabs.ad .MuiTabs-root': {
+          marginBottom: 0
+        }
+      } : {
+        '&& .description': {
+          marginBottom: theme.spacing(AD_MARGIN_BOTTOM),
+          paddingBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT_MOBILE}px)`,
+          [theme.breakpoints.up('sm')]: {
+            paddingBottom: `calc(${theme.spacing(AD_MARGIN_TOP)} + ${AD_HEIGHT}px)`
+          }
+        },
+        '&& .description.ad': {
+          paddingBottom: 0,
+          marginBottom: 0
+        }
+      })
+    }),
     [theme.breakpoints.up('lg')]: {
       paddingLeft: '60px',
       paddingRight: '60px'
     }
-  });
-});
+  };
+});
+const DialogContentRoot = styled('div', {
+  name: 'MuiDialogContent',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.dividers && styles.dividers];
+  }
+})(({
+  theme,
+  ownerState
+}) => ({
+  flex: '1 1 auto',
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
+  overflowY: 'auto',
+  padding: '20px 24px',
+  ...(ownerState.dividers ? {
+    padding: '16px 24px',
+    borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+  } : {
+    [`.${dialogTitleClasses.root} + &`]: {
+      paddingTop: 0
+    }
+  })
+}));

package/node/v6.0.0/styled/test-cases/ConditionalStyled.expected.js

@@ -1,10 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["expand"];
 const LinearProgressBar1 = styled('span', {
   name: 'MuiLinearProgress',
   slot: 'Bar1',
@@ -22,6 +18,7 @@ const LinearProgressBar1 = styled('span', {
       variant: 'buffer'
     },
     style: {
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].light,
       '&:hover': {}
     }
   }, {
@@ -32,14 +29,6 @@ const LinearProgressBar1 = styled('span', {
     style: {
       backgroundColor: 'currentColor'
     }
-  }, {
-    props: {
-      variant: 'buffer',
-      color: 'normal'
-    },
-    style: {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].light
-    }
   }, {
     props: ({
       variant,
@@ -62,27 +51,33 @@ const LinearProgressBar1 = styled('span', {
     }
   }, {
     props: ({
-      ownerState,
-      color
-    }) => ownerState.variant !== 'buffer' && color === 'inherit',
+      ownerState
+    }) => ownerState.variant !== 'buffer',
     style: {
-      backgroundColor: 'currentColor'
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
     }
   }, {
     props: ({
-      ownerState
-    }) => ownerState.variant !== 'buffer' && ownerState.color !== 'inherit',
+      ownerState,
+      color
+    }) => ownerState.variant !== 'buffer' && color === 'inherit',
     style: {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+      backgroundColor: 'currentColor'
     }
   }]
 }));
 const ExpandMore = styled(props => {
-  const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, (0, _extends2.default)({}, other));
+  const {
+    expand,
+    ...other
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
+    ...other
+  });
 })(({
   theme
 }) => ({
+  transform: 'rotate(180deg)',
   marginLeft: 'auto',
   transition: theme.transitions.create('transform', {
     duration: theme.transitions.duration.shortest
@@ -94,13 +89,6 @@ const ExpandMore = styled(props => {
     style: {
       transform: 'rotate(0deg)'
     }
-  }, {
-    props: ({
-      expand
-    }) => !!expand,
-    style: {
-      transform: 'rotate(180deg)'
-    }
   }]
 }));
 const Main = styled('main', {
@@ -203,4 +191,41 @@ const StyledAppContainer = styled(AppContainer, {
       }
     }]
   };
-});
+});
+const DialogContentRoot = styled('div', {
+  name: 'MuiDialogContent',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.root, ownerState.dividers && styles.dividers];
+  }
+})(({
+  theme
+}) => ({
+  flex: '1 1 auto',
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
+  overflowY: 'auto',
+  padding: '20px 24px',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.dividers,
+    style: {
+      padding: '16px 24px',
+      borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.dividers,
+    style: {
+      [`.${dialogTitleClasses.root} + &`]: {
+        paddingTop: 0
+      }
+    }
+  }]
+}));

package/node/v6.0.0/styled/test-cases/DynamicPropsStyled.actual.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styles = require("@mui/material/styles");
+const DemoToolbarRoot = (0, _styles.styled)('div', {
+  shouldForwardProp: prop => prop !== 'demoOptions' && prop !== 'openDemoSource'
+})(({
+  theme,
+  demoOptions,
+  openDemoSource
+}) => [{
+  display: 'none',
+  [theme.breakpoints.up('sm')]: {
+    top: 0,
+    maxHeight: 50,
+    display: 'block',
+    marginTop: demoOptions.bg === 'inline' ? theme.spacing(1) : -1,
+    padding: theme.spacing(0.5, 1),
+    border: `1px solid ${(theme.vars || theme).palette.divider}`,
+    borderTopWidth: demoOptions.bg === 'inline' ? 1 : 0,
+    backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.2),
+    borderRadius: openDemoSource ? 0 : '0 0 12px 12px',
+    transition: theme.transitions.create('border-radius'),
+    ...(theme.direction === 'rtl' && {
+      left: theme.spacing(1)
+    }),
+    ...(theme.direction !== 'rtl' && {
+      right: theme.spacing(1)
+    })
+  }
+}, theme.applyDarkStyles({
+  [theme.breakpoints.up('sm')]: {
+    backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.2)
+  }
+})]);
+var _default = exports.default = DemoToolbarRoot;

package/node/v6.0.0/styled/test-cases/DynamicPropsStyled.expected.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styles = require("@mui/material/styles");
+const DemoToolbarRoot = (0, _styles.styled)('div', {
+  shouldForwardProp: prop => prop !== 'demoOptions' && prop !== 'openDemoSource'
+})(({
+  theme
+}) => [{
+  display: 'none',
+  [theme.breakpoints.up('sm')]: {
+    top: 0,
+    maxHeight: 50,
+    display: 'block',
+    marginTop: -1,
+    padding: theme.spacing(0.5, 1),
+    border: `1px solid ${(theme.vars || theme).palette.divider}`,
+    borderTopWidth: 0,
+    backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.2),
+    borderRadius: '0 0 12px 12px',
+    transition: theme.transitions.create('border-radius'),
+    ...theme.applyStyles("rtl", {
+      left: theme.spacing(1)
+    }),
+    ...theme.applyStyles("rtl", {
+      right: theme.spacing(1)
+    })
+  },
+  variants: [{
+    props: {
+      bg: 'inline'
+    },
+    style: {
+      [theme.breakpoints.up('sm')]: {
+        marginTop: theme.spacing(1)
+      }
+    }
+  }, {
+    props: {
+      bg: 'inline'
+    },
+    style: {
+      [theme.breakpoints.up('sm')]: {
+        borderTopWidth: 1
+      }
+    }
+  }, {
+    props: ({
+      openDemoSource
+    }) => openDemoSource,
+    style: {
+      [theme.breakpoints.up('sm')]: {
+        borderRadius: 0
+      }
+    }
+  }]
+}, theme.applyDarkStyles({
+  [theme.breakpoints.up('sm')]: {
+    backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[800], 0.2)
+  }
+})]);
+var _default = exports.default = DemoToolbarRoot;

package/node/v6.0.0/styled/test-cases/LogicalStyled.actual.js

@@ -25,4 +25,34 @@ const ToolbarRoot = styled('div', {
   disabled
 }) => ownerState.variant !== 'regular' && !disabled && theme.mixins.toolbar4, ({
   theme
-}) => theme.vars && theme.mixins.toolbar5);
+}) => theme.vars && theme.mixins.toolbar5);
+const ToggleButton = styled('button')(({
+  theme,
+  'aria-pressed': pressed = 'false'
+}) => ({
+  padding: '0.5rem 1rem',
+  borderRadius: theme.vars.radius.sm,
+  display: 'inline-flex',
+  justifyContent: 'center',
+  gap: '8px',
+  minHeight: 40,
+  fontFamily: theme.vars.fontFamily.body,
+  fontSize: theme.vars.fontSize.md,
+  fontWeight: theme.vars.fontWeight.md,
+  alignItems: 'center',
+  border: '1px solid',
+  borderColor: theme.vars.palette.neutral.outlinedBorder,
+  backgroundColor: theme.vars.palette.background.body,
+  boxShadow: theme.vars.shadow.md,
+  [theme.focus.selector]: theme.focus.default,
+  ...theme.variants.plain.neutral,
+  ...(pressed === 'false' && {
+    '&:hover': theme.variants.plainHover.neutral,
+    '&:active': theme.variants.plainActive.neutral
+  }),
+  ...(pressed === 'true' && {
+    color: theme.vars.palette.danger.plainColor,
+    backgroundColor: theme.vars.palette.background.body,
+    boxShadow: theme.shadow.sm.replace(/,/g, ', inset')
+  })
+}));

package/node/v6.0.0/styled/test-cases/LogicalStyled.expected.js

@@ -49,4 +49,42 @@ const ToolbarRoot = styled('div', {
   }]
 }), ({
   theme
-}) => theme.vars && theme.mixins.toolbar5);
+}) => theme.vars && theme.mixins.toolbar5);
+const ToggleButton = styled('button')(({
+  theme
+}) => ({
+  padding: '0.5rem 1rem',
+  borderRadius: theme.vars.radius.sm,
+  display: 'inline-flex',
+  justifyContent: 'center',
+  gap: '8px',
+  minHeight: 40,
+  fontFamily: theme.vars.fontFamily.body,
+  fontSize: theme.vars.fontSize.md,
+  fontWeight: theme.vars.fontWeight.md,
+  alignItems: 'center',
+  border: '1px solid',
+  borderColor: theme.vars.palette.neutral.outlinedBorder,
+  backgroundColor: theme.vars.palette.background.body,
+  boxShadow: theme.vars.shadow.md,
+  [theme.focus.selector]: theme.focus.default,
+  ...theme.variants.plain.neutral,
+  variants: [{
+    props: {
+      "aria-pressed": 'false'
+    },
+    style: {
+      '&:hover': theme.variants.plainHover.neutral,
+      '&:active': theme.variants.plainActive.neutral
+    }
+  }, {
+    props: {
+      "aria-pressed": 'true'
+    },
+    style: {
+      color: theme.vars.palette.danger.plainColor,
+      backgroundColor: theme.vars.palette.background.body,
+      boxShadow: theme.shadow.sm.replace(/,/g, ', inset')
+    }
+  }]
+}));

package/node/v6.0.0/styled/test-cases/NestedSpread.actual.js

@@ -1,42 +1,47 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const Component = styled('div')(({
   theme,
   ownerState
 }) => {
-  var _palette;
-  const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
-  return (0, _extends2.default)({
+  const palette = (theme.vars || theme).palette?.[ownerState.color];
+  return {
     overflow: 'visible',
     // Explicitly set the default value to solve a bug on IE11.
     color: (theme.vars || theme).palette.action.active,
     transition: theme.transitions.create('background-color', {
       duration: theme.transitions.duration.shortest
-    })
-  }, !ownerState.disableRipple && {
-    '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
-    }
-  }, ownerState.edge === 'start' && {
-    marginLeft: ownerState.size === 'small' ? -3 : -12
-  }, ownerState.edge === 'end' && {
-    marginRight: ownerState.size === 'small' ? -3 : -12
-  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && (0, _extends2.default)({
-    color: palette == null ? void 0 : palette.main
-  }, !ownerState.disableRipple && {
-    '&:hover': (0, _extends2.default)({}, palette && {
-      backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.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(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
       }
+    }),
+    ...(ownerState.edge === 'start' && {
+      marginLeft: ownerState.size === 'small' ? -3 : -12
+    }),
+    ...(ownerState.edge === 'end' && {
+      marginRight: ownerState.size === 'small' ? -3 : -12
+    }),
+    ...(ownerState.color !== 'inherit' && ownerState.color !== 'default' && {
+      color: palette?.main,
+      ...(!ownerState.disableRipple && {
+        '&:hover': {
+          // The codemod won't handle this case when the variable is not declared in the style argument.
+          // In this case, the `palette` create a new variable in the style argument.
+          ...(palette && {
+            backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
+          }),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
+        }
+      })
     })
-  }));
+  };
 });

package/node/v6.0.0/styled/test-cases/NestedSpread.expected.js

@@ -1,12 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 const Component = styled('div')(({
   theme
 }) => {
-  var _palette;
-  const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
+  const palette = (theme.vars || theme).palette?.[ownerState.color];
   return {
     // Explicitly set the default value to solve a bug on IE11.
     overflow: 'visible',
@@ -27,6 +24,13 @@ const Component = styled('div')(({
           }
         }
       }
+    }, {
+      props: {
+        edge: 'start'
+      },
+      style: {
+        marginLeft: -12
+      }
     }, {
       props: {
         edge: 'start',
@@ -36,12 +40,11 @@ const Component = styled('div')(({
         marginLeft: -3
       }
     }, {
-      props: ({
-        edge,
-        ownerState
-      }) => edge === 'start' && ownerState.size !== 'small',
+      props: {
+        edge: 'end'
+      },
       style: {
-        marginLeft: -12
+        marginRight: -12
       }
     }, {
       props: {
@@ -51,34 +54,29 @@ const Component = styled('div')(({
       style: {
         marginRight: -3
       }
-    }, {
-      props: ({
-        edge,
-        ownerState
-      }) => edge === 'end' && ownerState.size !== 'small',
-      style: {
-        marginRight: -12
-      }
     }, {
       props: ({
         ownerState
       }) => ownerState.color !== 'inherit' && ownerState.color !== 'default',
       style: {
-        color: palette == null ? void 0 : palette.main
+        color: palette?.main
       }
     }, {
       props: ({
         ownerState
       }) => ownerState.color !== 'inherit' && ownerState.color !== 'default' && !ownerState.disableRipple,
       style: {
-        '&:hover': (0, _extends2.default)({}, palette && {
-          backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
-        }, {
+        '&:hover': {
+          // The codemod won't handle this case when the variable is not declared in the style argument.
+          // In this case, the `palette` create a new variable in the style argument.
+          ...(palette && {
+            backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
+          }),
           // Reset on touch devices, it doesn't add specificity
           '@media (hover: none)': {
             backgroundColor: 'transparent'
           }
-        })
+        }
       }
     }]
   };