Property 'component' does not exist 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 ?

component props is present why you are saying it is not present https://mui.com/material-ui/api/typography/

If you go to Typography.d.ts file you will see that there is no component prop. I do not why. You could edit that file if it makes any sense. — programandoconro
– programandoconro, Commented Dec 26, 2022 at 5:55
Have you tried the options in the MUI docs? mui.com/material-ui/guides/composition/#with-typescript — Steve G
– Steve G, Commented Dec 26, 2022 at 6:48

programandoconro · Accepted Answer · 2022-12-26 08:08:00Z

3

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

edited Dec 26, 2022 at 8:08

answered Dec 26, 2022 at 7:10

programandoconro

2,7692 gold badges24 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Steve G Over a year ago

🙌 You don't need component: string -- React.ElementType should be sufficient. Or even: component: keyof JSX.IntrinsicElements

user944513 Over a year ago

@SteveGomez thanks for answering , But I saw there is component props in documentation . see my updated question

user944513 Over a year ago

@SteveGomez mui.com/material-ui/api/typography

Konrad Grzyb Over a year ago

Unfortunatelly base component (Typography) will not inherit props of a "component" like it does without styled 😔 i.e const CustomButton = styled(Button) and <CustomButton component={"a"} target="..."> will throw error as target is not a prop of CustomButton

Tushar Shahi · Accepted Answer · 2022-12-26 07:19:06Z

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

answered Dec 26, 2022 at 7:19

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

1 Comment

user944513 Over a year ago

But I saw there is component props in documentation . see my updated question –

Collectives™ on Stack Overflow

Property 'component' does not exist reactjs + materialUI + typescript?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related