How to type MUI Typography props? v5-CodePudding

I understand what I need to do, get the type definition for Typography.variant However I am not sure how to get these really.

interface TextProps {
  variant?: string
  component?: string
  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void
}

export const Text = ({ children, variant = 'body1', component = 'body1', onClick }: PropsWithChildren<TextProps>) => {
  return (
    <Typography variant={variant} component={component} onClick={onClick}>
      {children}
    </Typography>
  )
}

TS Error

No overload matches this call.
  Overload 2 of 2, '(props: DefaultComponentProps<TypographyTypeMap<{}, "span">>): Element', gave the following error.
    Type 'string' is not assignable to type '"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "body1" | "subtitle1" | "subtitle2" | "body2" | undefined'.  TS2769

CodePudding user response：

I believe this is how you can fix the type errors, both variant and component are not string, you can look at the Typography type definition file