[material-ui] Add mergeSlotProps for extending components

[siriwatknp]

From #44350 (comment).

Docs: https://deploy-preview-44809--material-ui.netlify.app/material-ui/guides/composition/#forwarding-slot-props

Without the function, a lot of boilerplate code is required. I believe that users will create this kind of utility in their codebase because it's quite a common use case to extend Material UI components, so I think we should provide this utility called mergeSlotProps.

The mergeSlotProps resolves function type and then merge the props. Only the className that's concatenated to preserve the same behavior of slotProps, the rest will override the default ones. The usage is added to the docs.

mergeSlotProps(
  (ownerState) => ({ className: 'outside' }),
  { className: 'inside' },
)

// className = 'inside outside'

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

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

@material-ui/core: parsed: +0.07% , gzip: +0.07%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 6f669a8

[DiegoAndai]

Thanks for working on this @siriwatknp. I think it will be very useful now that we're standardizing the slots pattern.

[siriwatknp]

Thanks for working on this @siriwatknp. I think it will be very useful now that we're standardizing the slots pattern.

Yes, this PR will be used by some Material UI components too, e.g. a SwipeableDrawer where it extends the Drawer component.

[DiegoAndai]

LGTM