Question

我正在尝试将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忽略它，但想解决这个问题。

Answer 1

根据材料用户界面提供的版式参考文档（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而不是组件prop。

Answer 2

自从我更新到material-ui/core@4.6.0和typescript@3.7.2以来，我有了这个。

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

Answer 3

在 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}
    />
  );
}

TypeScript错误：“字符串”类型无法分配给印刷术类型

3 个答案: