typescript - 排版组件

Question

根据此处的 Material ui 文档:https://material-ui.com/components/typography/

我应该能够按如下方式使用 Typography 组件:

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

但是，自从更新到 nextjs 9 后，我收到了这个输入错误:

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

为组件属性。我试过多次更新类型依赖项，但似乎无济于事。

感谢 Shanon 的建议，错误现在已转移到:

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>

这对我来说仍然是一个障碍。

鉴于我给出的第一个示例与文档完全匹配，我不知道如何推进这个主题。

Answer 1

ComponentType 是未初始化形式的功能组件/类组件的 React 类型。

I.E 要满足采用“React.ComponentType”的东西，您只需这样做...

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