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: