[material-ui] Add PropsProvider for Pigment CSS integration

[siriwatknp]

Context

The current approach for customizing Material UI component's default props is using the theme.components.*.defaultProps through React context.

For Pigment CSS, it's not possible to use React Component inside the theme because of build-time extraction.

Solution

Extract the defaultProps to another context, PropsProvider, so that users can customize the default props of Material UI components with Pigment CSS.

How's it look like

1. Before or After migration to v6: no changes required, the defaultProps that pass to the theme will propagate to PropsProvider automatically.

2. Transitioned to Pigment CSS while having Emotion: no changes required as well, as long as the ThemeProvider is used on the client.

3. Pigment CSS without Emotion: users need to import PropsProvider from Pigment CSS and pass thetheme.components

   import PropsProvider from '@mui/material/PropsProvider';
   
   <PropsProvider
     value={{
       // copied from the existing theme.components
       MuiButton: { defaultProps: { disableRipple: true } },
       MuiSelect: { defaultProps: { IconComponent: CustomIcon } },
     }}>
     {children}
   </PropsProvider>

   Finally, Emotion can be removed.

Search keywords:

[oliviertassinari]

For Pigment CSS, it's not possible to use React Component inside the theme because of build-time extraction.

It's still not clear to me that this is true. We didn't explore #42476 (comment)? The way Yak makes it work doesn't seem to even need the React.cache API, using a global does the same thing, since as I understand it, there no theme nesting support in Pigment CSS: https://yak.js.org/how-does-it-work#the-runtime-part.

I'm connecting the same dots with #43443. It would make sense to me to remove the <DefaultPropsProvider> API, we need this too for server components. Issue updated.