As I attempt to implement the Typography component from material-ui using TypeScript, I encounter a perplexing error message
TypeScript is throwing an 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}: </span>}
12 | <FormattedDate value={date} />
13 |
This is what my component currently looks like
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}: </span>}
<FormattedDate value={date} />
<FormattedTime value={date} />
</Typography>
);
I am puzzled by why "p" is being rejected as a valid value for the component prop. Similar issues arise when trying "h1" and "h2", despite the fact that the official demo uses strings in this way.
Is there something crucial that eludes me? I hesitate to simply bypass the problem with // @ts-ignore, and instead want to resolve it.