排版组件答案

【问题标题】：Typography component排版组件
【发布时间】：2020-02-05 05:27:49
【问题描述】：

根据这里的材料 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>

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

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

【问题讨论】：

问题是推断是在h1和h1上推断strng，试试这个<Typography variant={"h1"} component={"h1"}>或者这个<Typography variant={"h1" as const} component={"h1" as const}>
@ShanonJackson 谢谢你的帮助，我已经用我发现的内容更新了原始帖子
是的，所以现在它说 Component 应该是 React 组件而不是字符串，

标签： typescript material-ui typescript-typings

【解决方案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>}};

【讨论】：

【解决方案2】：

就隐藏打字稿错误而言，使用component={'div' as any} 对我有用。

【讨论】：