Ошибка TypeScript: тип 'string' не может быть назначен типу для Typography - PullRequest
Новая
       16

Ошибка TypeScript: тип 'string' не может быть назначен типу для Typography

2 голосов
/ 16 октября 2019

Я пытаюсь использовать компонент Typography из material-ui с 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", которые не работают таким же образом, и, очевидно, официальная демоверсия также использует строку.

Есть ли что-то, что мне не хватает ?, яне хочу игнорировать это с помощью // @ts-ignore, но хочу это исправить.

Ответы [ 2 ]

0 голосов
/ 12 ноября 2019

У меня есть это с тех пор, как я обновил до material-ui/core@4.6.0 и typescript@3.7.2.

Мне удалось заставить замолчать ошибки с помощью component={'div' as any}, поэтому я публикую это как временный ответ, но я думаю,должно быть лучшее исправление.

0 голосов
/ 16 октября 2019

В соответствии со справочным документом, предоставленным пользовательским интерфейсом материалов для типографии (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.

...