Ability to set component props other than style to new component variants

[yblok13]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Just like you can set style on a custom variant, we should be able to set all the other props for each variant.

Examples 🌈

const theme = createTheme({
  components: {
    MuiChip: {
      variants: [{
        props: { variant: '0' },
        label: 'DRAFT',
        sx: { bgcolor: 'orange', color: 'black' }
      }]
});

function StatusBar(statusNumber = 0) {

  return (
    <ThemeProvider theme={theme}>
      <Chip variant={statusNumber} />
    </ThemeProvider>
  )
}

Motivation 🔦

Instead of creating a bunch of custom components, it's super easy to just declare the variant on the component instead of all the other props as well. I also rather use sx prop than the style prop.

[eps1lon]

Thanks for the feedback.

Note that the best approach still is to create custom components. The theming based approach always has the downside of improving bundle size globally and makes discoverability of the implementation harder.