属性“组件”不存在 reactjs + materialUI + typescript？

Question

I am creating custom typography. But while using I am getting below error.

I am following below document

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

here is my code 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;

I am using like this

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

don't why it is showing error?

  [![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]

any suggestion?

Answer 1

Component seems not to be present in TypographyProps. Therefore, inspired by @SteveGomez, you can do something like: <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;

EDIT: You could also use {component: keyof JSX.IntrinsicElements} .

Answer 2

To be able to use the component prop, the type of the props should be used with type arguments. Just use React.ElementType as mentioned in the docs.

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

Now component accepts any React Custom Component and HTML element.

Docs