[material-ui] `className` and `style` from theme default props are not merged with the component `slotProps`

[siriwatknp]

Issue

If the theme defaultProps.slotProps defines className and style, they are replaced by the component's slotProps:

// src/theme.ts
const theme = createTheme({
  components: {
    MuiCardHeader: {
      defaultProps: {
        slotProps: {
          title: {
            className: "text-sm",
            style: {
              color: "red",
            },
          },
        },
      },
    },
  },
});

<ThemeProvider theme={theme}>
  <CardHeader
    slotProps={{
      title: { className: 'text-red-500', style: { background: 'blue' } },
    }}
  />
</ThemeProvider>

The className and style from the theme are replaced by the slotProps on the component instance.

Expected

Based on the above snippet, the CardHeader should have className text-sm text-red-500 and the style color: 'red', background: 'blue'.

Use case

When using Material UI together and Tailwind CSS together.

[sai6855]

@siriwatknp I think this issue is not just with slotProps but how className from theme and className from props are dealt across components.

In below demo, i attached classComponent (directly added as props) and classTheme (coming from theme), in the final DOM, only classComponent gets attached to element not classTheme.

Demo: https://stackblitz.com/edit/react-vmsxvrwm?file=styles.css,Demo.tsx

So i think, before fixing this issue in slotProps maybe we should first fix it at component level. what do you think?

[siriwatknp]

So i think, before fixing this issue in slotProps maybe we should first fix it at component level. what do you think?

I see, that can be included in the same PR. It sounds like the same topic to me.

However, we need some flag to let people opt-in to prevent breaking changes.

Something like:

createTheme({
  components: {
    mergeClassNameAndStyle: true,
    MuiButton: {
      defaultProps: {},
    }
  }
})