TypeScript 错误：类型“字符串”不可分配给排版的类型答案

【问题标题】：TypeScript error: Type 'string' is not assignable to type for TypographyTypeScript 错误：类型“字符串”不可分配给排版的类型
【发布时间】：2019-10-16 13:24:23
【问题描述】：

我正在尝试将 Material-ui 中的 Typography 组件与 TypeScript 一起使用，但我收到了这个奇怪的错误

TypeScript error: Type 'string' is not assignable to type 'ComponentClass<HTMLAttributes<HTMLElement>, any> | FunctionComponent<HTMLAttributes<HTMLElement>> | undefined'.  TS2322

     8 | }
     9 | export default ({ text, date }: Props) => (
  > 10 |   <Typography component="p" gutterBottom>
       |               ^
    11 |     {text && <span>{text}:&nbsp;</span>}
    12 |     <FormattedDate value={date} />
    13 |     &nbsp;

这是我的组件的样子

import React from 'react';
import { FormattedDate, FormattedTime } from 'react-intl';
import Typography from '@material-ui/core/Typography';

interface Props {
  date: Date;
  text?: string;
}
export default ({ text, date }: Props) => (
  <Typography component="p" gutterBottom>
    {text && <span>{text}:&nbsp;</span>}
    <FormattedDate value={date} />
    &nbsp;
    <FormattedTime value={date} />
  </Typography>
);

我无法理解为什么 "p" 不是 component 属性的可接受值。我用 "h1" 和 "h2" 尝试了它以同样的方式失败，显然，official demo 也使用了字符串。

我有什么遗漏吗？我不想用// @ts-ignore 忽略这个，但想解决这个问题。

【问题讨论】：

标签： javascript reactjs typescript material-ui

【解决方案1】：

在 2021 年遇到这种情况，问题是我传播了 HTMLAttributes 的输入反对 InputBase，而我应该正确传播 InputBaseProps。

在我的情况下，它与输入相关，但可以为每个组件复制相同的内容：只要您使用材质 UI 组件，您应该提供它要求的属性并正确设置正确的道具类型，如果您使用/扩展它们。

给出错误的示例：

import { HTMLAttributes } from 'react';

import InputBase from '@material-ui/core/InputBase';

import inputStyle from 'Input.module.scss';

export interface InputProps extends HTMLAttributes<HTMLInputElement> {
  
}

export function Input(props: InputProps) {
  const { ...rest } = props;

  return (
    <InputBase
      fullWidth={true}
      className={[inputStyle.input].join(' ')}
      color='primary'
      {...rest}
    />
  );
}

（在这种情况下，color 出现错误）

正确的做法：

import InputBase, { InputBaseProps } from '@material-ui/core/InputBase';

import inputStyle from 'Input.module.scss';

export interface InputProps extends InputBaseProps {
  
}

export function Input(props: InputProps) {
  const { ...rest } = props;

  return (
    <InputBase
      fullWidth={true}
      className={[inputStyle.input].join(' ')}
      color='primary'
      {...rest}
    />
  );
}

【讨论】：

【解决方案2】：

根据 Material UI for Typography 提供的参考文档 (https://material-ui.com/api/typography/)

{ h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', subtitle1: 'h6', subtitle2: 'h6', body1: 'p', body2: 'p',}

variantMapping 有这些映射，所以如果你想使用<p> 标签，你可以使用变体类型作为 body1 或 body2 而不是组件属性。

【讨论】：

欢迎来到 Stack Overflow！文档中没有提到他们说对组件道具的支持正在消失。我确实想使用组件属性，但 TypeScript 的行为很奇怪。
“组件”的描述清楚地提到了用于根节点的组件。使用 DOM 元素或组件的字符串。默认情况下，它将变体映射到一个好的默认标题组件。
是的，但这并不意味着它应该为字符串抛出错误。我们这里不讨论是否使用组件道具。我在问如何修复 TypeScript 错误。我问这个是因为我在项目的多个地方都使用了 component 道具，我无法更改所有这些道具并在任何地方手动测试。
对我来说也一样。我可以使用官方网站上的代码沙箱，使用组件道具中的字符串将根元素更改为 div 或 p（或其他），但 typescript 突然开始显示错误。 @ArpitBhatia 组件道具会被丢弃吗？是否有一些关于此的信息可以链接到我们？我们不应该使用您找到的组件道具是否有官方原因？

【解决方案3】：

自从我更新到material-ui/core@4.6.0 和typescript@3.7.2 后，我就有了。

我设法通过使用 component={'div' as any} 来消除错误，因此我将其发布为临时答案，但我确实认为必须有更好的解决方案。

【讨论】：