屬性“組件”不存在 reactjs + materialUI + typescript？

Question

我正在創建自定義排版。 但是在使用時我遇到了以下錯誤。

我正在關注以下文件

https://mui.com/material-ui/api/typography/

這是我的代碼https://codesandbox.io/s/fragrant-mountain-eukirg

import * as React from "react";
import Typography, { TypographyProps } from "@mui/material/Typography";
import { styled } from "@mui/material/styles";

const LabelXs = styled(Typography)<TypographyProps>(({ fontWeight }) => {
  return {
    fontSize: 15
  };
});

export default LabelXs;

我這樣用

 <LabelXs component={"div"}>Div element</LabelXs>

不為什么它顯示錯誤？

  [![Property 'component' does not exist on type 'IntrinsicAttributes & SystemProps<Theme> & { align?: "right" | "left" | "inherit" | "center" | "justify" | undefined; children?: ReactNode; ... 6 more ...; variantMapping?: Partial<...> | undefined; } & CommonProps & Omit<...> & MUIStyledCommonProps<...>'.ts(2322)][1]][1]

有什么建議嗎？

Answer 1

TypographyProps 中似乎沒有組件。 因此，受@SteveGomez 的啟發，您可以執行以下操作： <TypographyProps & {component: React.ElementType}>

import * as React from "react";
import Typography, { TypographyProps } from "@mui/material/Typography";
import { styled } from "@mui/material/styles";

const LabelXs = styled(Typography)<TypographyProps & {component: React.ElementType}>(({ fontWeight }) => {
  return {
    fontSize: 15
  };
});

export default LabelXs;

編輯：您也可以使用{component: keyof JSX.IntrinsicElements} 。

Answer 2

為了能夠使用組件道具，道具的類型應與類型 arguments 一起使用。只需使用文檔中提到的 React.ElementType。

const LabelXs = styled(Typography)<
  TypographyProps & { component: React.ElementType }
>(({ fontWeight }) => {
  return {
    fontSize: 15
  };
});

現在component接受任何 React 自定義組件和 HTML 元素。

文檔