Make component theme default props variant-aware

[paulleonartcalvo]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

When passing component overrides to createTheme(), allow the variants objects for each component to define their own default props as a callback with theme as its argument (same as style on the same object). This would mean that given a minimum set of required props for the component to qualify as a 'variant', we can assign any other default props for that variant.

Examples 🌈

export const MuiAutocompleteOverrides: Components<Theme>['MuiAutocomplete'] = {
  defaultProps: { // THIS IS NOT VARIANT AWARE
    popupIcon: (
      <CaretDownOutlineIcon size={theme.iconScale['x-small']} color={theme.colors['neutral-75']} />
    )
  },
  variants: [
    {
      props: {
        size: 'medium'
      },
      style: (theme) => ({
        padding: 0
      }),
      defaultProps: (theme) => ({ // THIS IS VARIANT AWARE
        popupIcon: (
          <CaretDownOutlineIcon size={theme.iconScale['medium']} color={theme.colors['neutral-75']} />
        )
      })
    }
  ]
};

Motivation 🔦

I want to be able to define what the default props for a component should be given that it matches a specific variant which i have defined. Specifically, i want to define a default icon for the Autocomplete component whose size changes according to the size prop passed to the component. Without this ability, i am forced to use a default icon whose size won't intelligently match the Autocomplete depending on the size. Instead, i have to pass the icon as the appropriate size everywhere that i use the Autocomplete.

[aimad-majdou]

Any updates on this ? this is also mandatory to override the svg icons used by an Alert via createTheme

[kavlih]

Would also love to see this. Is there currently any work around to archieve this?

[Londeren]

It would be really cool to have this feature!

[paulleonartcalvo]

Dusting off the cobwebs 🕸️ 🧹

[jcohen14]

Bumping this! Would love to have this feature!