[material-ui] Update mergeSlotProps to merge style (#44959)

Author: siriwatknp

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

@@ -65,6 +65,10 @@ If you added another `className` via the `slotProps` prop on the Custom Tooltip
 The popper slot in the original example would now have both classes applied to it, in addition to any others that may be present: `"[…] custom-tooltip-popper foo"`.
 :::
 
+:::info
+`style` object are shallow merged rather than replacing one another. The style keys from the first argument have higher priority.
+:::
+
 ## Component prop
 
 Material UI allows you to change the root element that will be rendered via a prop called `component`.

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

@@ -1,10 +1,12 @@
+import * as React from 'react';
 import { expect } from 'chai';
 
 import mergeSlotProps from './mergeSlotProps';
 
 type OwnerState = {
   className: string;
   'aria-label'?: string;
+  style?: React.CSSProperties;
 };
 
 describe('utils/index.js', () => {
@@ -21,6 +23,27 @@ describe('utils/index.js', () => {
       });
     });
 
+    it('merge styles', () => {
+      expect(
+        mergeSlotProps<{ style: React.CSSProperties }>(
+          { style: { color: 'red' } },
+          { style: { backgroundColor: 'blue' } },
+        ),
+      ).to.deep.equal({
+        style: { color: 'red', backgroundColor: 'blue' },
+      });
+
+      // external styles should override
+      expect(
+        mergeSlotProps<{ style: React.CSSProperties }>(
+          { style: { backgroundColor: 'red' } },
+          { style: { backgroundColor: 'blue' } },
+        ),
+      ).to.deep.equal({
+        style: { backgroundColor: 'red' },
+      });
+    });
+
     it('external slot props should override', () => {
       expect(
         mergeSlotProps<OwnerState>(
@@ -78,6 +101,35 @@ describe('utils/index.js', () => {
       });
     });
 
+    it('merge styles for callbacks', () => {
+      expect(
+        mergeSlotProps(
+          () => ({
+            style: { color: 'red' },
+          }),
+          () => ({
+            style: { backgroundColor: 'blue' },
+          }),
+        )(),
+      ).to.deep.equal({
+        style: { color: 'red', backgroundColor: 'blue' },
+      });
+
+      // external styles should override
+      expect(
+        mergeSlotProps(
+          () => ({
+            style: { backgroundColor: 'red' },
+          }),
+          () => ({
+            style: { backgroundColor: 'blue' },
+          }),
+        )(),
+      ).to.deep.equal({
+        style: { backgroundColor: 'red' },
+      });
+    });
+
     it('external callback should be called with default slot props', () => {
       expect(
         mergeSlotProps<(ownerState: OwnerState) => OwnerState>(

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

@@ -28,6 +28,10 @@ export default function mergeSlotProps<
         ...defaultSlotPropsValue,
         ...externalSlotPropsValue,
         ...(!!className && { className }),
+        ...(defaultSlotPropsValue?.style &&
+          externalSlotPropsValue?.style && {
+            style: { ...defaultSlotPropsValue.style, ...externalSlotPropsValue.style },
+          }),
       };
     }) as U;
   }
@@ -39,5 +43,9 @@ export default function mergeSlotProps<
     ...defaultSlotProps,
     ...externalSlotProps,
     ...(!!className && { className }),
+    ...((defaultSlotProps as Record<string, any>)?.style &&
+      externalSlotProps?.style && {
+        style: { ...(defaultSlotProps as Record<string, any>).style, ...externalSlotProps.style },
+      }),
   } as U;
 }