[Material UI] Update overridesResolver return from object to array …

…of styles (#44752)
mui · Dec 13, 2024 · 68e3b40 · 68e3b40
1 parent 33490eb
commit 68e3b40
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 33 deletions.
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -250,10 +250,11 @@ const AutocompleteClearIndicator = styled(IconButton, {
 const AutocompletePopupIndicator = styled(IconButton, {
   name: 'MuiAutocomplete',
   slot: 'PopupIndicator',
-  overridesResolver: ({ ownerState }, styles) => ({
-    ...styles.popupIndicator,
-    ...(ownerState.popupOpen && styles.popupIndicatorOpen),
-  }),
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+
+    return [styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen];
+  },
 })({
   padding: 2,
   marginRight: -2,

diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js
@@ -31,10 +31,9 @@ const useUtilityClasses = (ownerState) => {
 const AvatarGroupRoot = styled('div', {
   name: 'MuiAvatarGroup',
   slot: 'Root',
-  overridesResolver: (props, styles) => ({
-    [`& .${avatarGroupClasses.avatar}`]: styles.avatar,
-    ...styles.root,
-  }),
+  overridesResolver: (props, styles) => {
+    return [{ [`& .${avatarGroupClasses.avatar}`]: styles.avatar }, styles.root];
+  },
 })(
   memoTheme(({ theme }) => ({
     display: 'flex',

diff --git a/packages/mui-material/src/CardHeader/CardHeader.js b/packages/mui-material/src/CardHeader/CardHeader.js
@@ -26,11 +26,13 @@ const useUtilityClasses = (ownerState) => {
 const CardHeaderRoot = styled('div', {
   name: 'MuiCardHeader',
   slot: 'Root',
-  overridesResolver: (props, styles) => ({
-    [`& .${cardHeaderClasses.title}`]: styles.title,
-    [`& .${cardHeaderClasses.subheader}`]: styles.subheader,
-    ...styles.root,
-  }),
+  overridesResolver: (props, styles) => {
+    return [
+      { [`& .${cardHeaderClasses.title}`]: styles.title },
+      { [`& .${cardHeaderClasses.subheader}`]: styles.subheader },
+      styles.root,
+    ];
+  },
 })({
   display: 'flex',
   alignItems: 'center',

diff --git a/packages/mui-material/src/FormControl/FormControl.js b/packages/mui-material/src/FormControl/FormControl.js
@@ -23,12 +23,14 @@ const useUtilityClasses = (ownerState) => {
 const FormControlRoot = styled('div', {
   name: 'MuiFormControl',
   slot: 'Root',
-  overridesResolver: ({ ownerState }, styles) => {
-    return {
-      ...styles.root,
-      ...styles[`margin${capitalize(ownerState.margin)}`],
-      ...(ownerState.fullWidth && styles.fullWidth),
-    };
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+
+    return [
+      styles.root,
+      styles[`margin${capitalize(ownerState.margin)}`],
+      ownerState.fullWidth && styles.fullWidth,
+    ];
   },
 })({
   display: 'inline-flex',

diff --git a/packages/mui-material/src/FormLabel/FormLabel.js b/packages/mui-material/src/FormLabel/FormLabel.js
@@ -33,12 +33,13 @@ const useUtilityClasses = (ownerState) => {
 export const FormLabelRoot = styled('label', {
   name: 'MuiFormLabel',
   slot: 'Root',
-  overridesResolver: ({ ownerState }, styles) => {
-    return {
-      ...styles.root,
-      ...(ownerState.color === 'secondary' && styles.colorSecondary),
-      ...(ownerState.filled && styles.filled),
-    };
+  overridesResolver: (props, styles) => {
+    const { ownerState } = props;
+    return [
+      styles.root,
+      ownerState.color === 'secondary' && styles.colorSecondary,
+      ownerState.filled && styles.filled,
+    ];
   },
 })(
   memoTheme(({ theme }) => ({

diff --git a/packages/mui-material/src/styles/styled.test.js b/packages/mui-material/src/styles/styled.test.js
@@ -168,10 +168,10 @@ describe('styled', () => {
         },
       });
 
-      const testOverridesResolver = (props, styles) => ({
-        ...styles.root,
-        ...(props.variant && styles[props.variant]),
-      });
+      const testOverridesResolver = (props, styles) => [
+        styles.root,
+        props.variant && styles[props.variant],
+      ];
 
       Test = styled('div', {
         shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'size' && prop !== 'sx',
@@ -429,10 +429,10 @@ describe('styled', () => {
     });
 
     it('should respect the skipSx option', () => {
-      const testOverridesResolver = (props, styles) => ({
-        ...styles.root,
-        ...(props.variant && styles[props.variant]),
-      });
+      const testOverridesResolver = (props, styles) => [
+        styles.root,
+        props.variant && styles[props.variant],
+      ];
 
       const TestNoSx = styled('div', {
         shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'size' && prop !== 'sx',