如何输入 MUI Typography 道具？v5

Question

我明白我需要做什么，获取类型定义，Typography.variant但是我不确定如何真正获取这些。

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>
  )
}

传输错误

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

Answer 1

我相信这就是修复类型错误的方法，两者variant都不是字符串，您可以在此处component查看Typography类型定义文件以供参考。

import Typography, { TypographyTypeMap } from "@mui/material/Typography";

interface TextProps {
  variant?: TypographyTypeMap["props"]["variant"];
  component?: React.ElementType;
  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
}