From 68e3b40bc5d21a446e48a5ab651f713ea6337a52 Mon Sep 17 00:00:00 2001
From: siddhantantil39 <54893999+siddhantantil39@users.noreply.github.com>
Date: Fri, 13 Dec 2024 15:32:20 +0530
Subject: [PATCH] [Material UI] Update `overridesResolver` return from object
 to array of styles (#44752)

---
 .../src/Autocomplete/Autocomplete.js             |  9 +++++----
 .../mui-material/src/AvatarGroup/AvatarGroup.js  |  7 +++----
 .../mui-material/src/CardHeader/CardHeader.js    | 12 +++++++-----
 .../mui-material/src/FormControl/FormControl.js  | 14 ++++++++------
 packages/mui-material/src/FormLabel/FormLabel.js | 13 +++++++------
 packages/mui-material/src/styles/styled.test.js  | 16 ++++++++--------
 6 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index 555ec43bb213c1..4cbff62de4ac46 100644
--- 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
index b6418743544af2..1b342452e1abd4 100644
--- 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
index 80471366956899..88bcd6c709fcdf 100644
--- 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
index 19698ecb6c3802..dab1856439aa8a 100644
--- 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
index a773ea4e7d25b9..25f709df848cdd 100644
--- 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
index b547370b18f569..1b844908c0c8c5 100644
--- 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',