[material-ui][utils] Merge sx instead of override when using `merge…

…SlotProps` (#45062)

docs/data/material/guides/composition/composition.md

@@ -66,7 +66,7 @@ The popper slot in the original example would now have both classes applied to i
 :::
 
 :::info
-`style` object are shallow merged rather than replacing one another. The style keys from the first argument have higher priority.
+`style` object and `sx` are shallow merged rather than replacing one another. Those values from the first argument have higher priority.
 :::
 
 ## Component prop

packages/mui-material/src/utils/mergeSlotProps.test.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
+import { SxProps } from '@mui/material/styles';
 
 import mergeSlotProps from './mergeSlotProps';
 
@@ -44,6 +45,31 @@ describe('utils/index.js', () => {
       });
     });
 
+    it('merge sx', () => {
+      expect(
+        mergeSlotProps<{ sx: SxProps }>(
+          { sx: { color: 'red' } },
+          { sx: { backgroundColor: 'blue' } },
+        ),
+      ).to.deep.equal({
+        sx: [{ backgroundColor: 'blue' }, { color: 'red' }],
+      });
+    });
+
+    it('merge sx array', () => {
+      expect(
+        mergeSlotProps<{ sx: SxProps }>(
+          { sx: [{ color: 'red', '&.Mui-disabled': { opacity: 0 } }] },
+          { sx: [{ backgroundColor: 'blue', '&.Mui-disabled': { opacity: 0.5 } }] },
+        ),
+      ).to.deep.equal({
+        sx: [
+          { backgroundColor: 'blue', '&.Mui-disabled': { opacity: 0.5 } },
+          { color: 'red', '&.Mui-disabled': { opacity: 0 } },
+        ],
+      });
+    });
+
     it('external slot props should override', () => {
       expect(
         mergeSlotProps<OwnerState>(
@@ -130,6 +156,35 @@ describe('utils/index.js', () => {
       });
     });
 
+    it('merge sx for callback', () => {
+      expect(
+        mergeSlotProps(
+          () => ({
+            sx: { color: 'red' },
+          }),
+          () => ({
+            sx: { backgroundColor: 'blue' },
+          }),
+        )(),
+      ).to.deep.equal({
+        sx: [{ backgroundColor: 'blue' }, { color: 'red' }],
+      });
+    });
+
+    it('merge sx array for callback', () => {
+      expect(
+        mergeSlotProps(
+          () => ({ sx: [{ color: 'red', '&.Mui-disabled': { opacity: 0 } }] }),
+          () => ({ sx: [{ backgroundColor: 'blue', '&.Mui-disabled': { opacity: 0.5 } }] }),
+        )(),
+      ).to.deep.equal({
+        sx: [
+          { backgroundColor: 'blue', '&.Mui-disabled': { opacity: 0.5 } },
+          { color: 'red', '&.Mui-disabled': { opacity: 0 } },
+        ],
+      });
+    });
+
     it('external callback should be called with default slot props', () => {
       expect(
         mergeSlotProps<(ownerState: OwnerState) => OwnerState>(

packages/mui-material/src/utils/mergeSlotProps.ts

@@ -32,20 +32,38 @@ export default function mergeSlotProps<
           externalSlotPropsValue?.style && {
             style: { ...defaultSlotPropsValue.style, ...externalSlotPropsValue.style },
           }),
+        ...(defaultSlotPropsValue?.sx &&
+          externalSlotPropsValue?.sx && {
+            sx: [
+              ...(Array.isArray(defaultSlotPropsValue.sx)
+                ? defaultSlotPropsValue.sx
+                : [defaultSlotPropsValue.sx]),
+              ...(Array.isArray(externalSlotPropsValue.sx)
+                ? externalSlotPropsValue.sx
+                : [externalSlotPropsValue.sx]),
+            ],
+          }),
       };
     }) as U;
   }
-  const className = clsx(
-    (defaultSlotProps as Record<string, any>)?.className,
-    externalSlotProps?.className,
-  );
+  const typedDefaultSlotProps = defaultSlotProps as Record<string, any>;
+  const className = clsx(typedDefaultSlotProps?.className, externalSlotProps?.className);
   return {
     ...defaultSlotProps,
     ...externalSlotProps,
     ...(!!className && { className }),
-    ...((defaultSlotProps as Record<string, any>)?.style &&
+    ...(typedDefaultSlotProps?.style &&
       externalSlotProps?.style && {
-        style: { ...(defaultSlotProps as Record<string, any>).style, ...externalSlotProps.style },
+        style: { ...typedDefaultSlotProps.style, ...externalSlotProps.style },
+      }),
+    ...(typedDefaultSlotProps?.sx &&
+      externalSlotProps?.sx && {
+        sx: [
+          ...(Array.isArray(typedDefaultSlotProps.sx)
+            ? typedDefaultSlotProps.sx
+            : [typedDefaultSlotProps.sx]),
+          ...(Array.isArray(externalSlotProps.sx) ? externalSlotProps.sx : [externalSlotProps.sx]),
+        ],
       }),
   } as U;
 }