[material-ui] Using variant props callback errors in TypeScript

[maddrag0n]

Related page

https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants

Kind of issue

Missing information

Issue description

When customizing component variants using the createTheme approach, using a callback for variant props results in a TS error:

Type '(props: ButtonProps<"button", {}>) => "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined' has no properties in common with type 'Partial<ButtonProps<"button", {}>>'.ts(2559)

This seems to happen because OverridableTypeMap has props typed to {} and props => ({}) does not satisfy {}.

I assume I need to do some type of module augmentation, however I am not completely sure at which level (without breaking other stuff).

Example:

const theme = createTheme({
  components: {
    MuiButton: {
      variants: [{
        props: (props: ButtonProps) => props.color !== 'primary',
        style: ({ theme: { palette } }) => ({
          backgroundColor: palette.grey[500],
        }),
      }]
    }
  }
})

EDIT: For anyone running into the same issue, ugly typecasting works (but is not a viable solution)

{ props: (({ color }: ButtonProps) => color !== 'secondary') as Partial<ButtonProps<"button", {}>> }

Context

• Typescript 4.9

Search keywords: customization:theme, typescript, support:question

[ZeeshanTamboli]

Looks like a bug. I'll create a PR soon.