Typography component

user_3691676 0
Viewed 1248

According to the material ui docs here: https://material-ui.com/components/typography/

I should be able to use the Typography component as follows:

<Typography variant="h1" component="h1">
  Hello World
</Typography>

However, since updating to nextjs 9, I get this typing error:

Type 'string' is not assignable to type 'ElementType<HTMLAttributes<HTMLElement>>'

for the component property. I've tried updating the typing dependencies a bunch, but nothing seems to help.

Thanks to Shanon's suggestion, the error has now moved on to:

48:36 Type '"h1"' is not assignable to type 'ElementType<HTMLAttributes<HTMLElement>>'.
    46 |         </Grid>
    47 |         <Grid item>
  > 48 |           <Typography variant="h1" component={'h1' as const}>
       |                                    ^
    49 |             Hello World
    50 |           </Typography>
    51 |         </Grid>

Which is still a blocker for me.

Given the first example I gave matches the docs exactly, I'm at a loss for how to progress the subject.

typescript-typings material-ui typescript
2 Answers

ComponentType is React's type for Functional Components / Class Components in their un-initialized form.

I.E To satisfy something that takes "React.ComponentType" you would simply just do this...

const test: React.ComponentType<{name: string}> = ({name})  => <div>I AM DIV</div>;
const test1: React.ComponentType<{name: string}> = class extends React.Component<{name: string}> { render() {return <div>I AM DIV TO</div>}};
user_74284340

Using component={'div' as any} worked for me, as far as hiding the typescript errors is concerned.

user_44306400
Related