I am trying to use Typography ponent from material-ui with TypeScript, but I am getting this weird error

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 ponent="p" gutterBottom>
       |               ^
    11 |     {text && <span>{text}:&nbsp;</span>}
    12 |     <FormattedDate value={date} />
    13 |     &nbsp;

Here's how my ponent 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 ponent="p" gutterBottom>
    {text && <span>{text}:&nbsp;</span>}
    <FormattedDate value={date} />
    &nbsp;
    <FormattedTime value={date} />
  </Typography>
);

I am not able to understand why "p" is not an acceptable value for ponent prop. I tried it with "h1" and "h2" which fails in the same way and apparently, the official demo also uses the string.

Is there anything I am missing?, I don't want to ignore this with // @ts-ignore, but want to fix this.

I am trying to use Typography ponent from material-ui with TypeScript, but I am getting this weird error

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 ponent="p" gutterBottom>
       |               ^
    11 |     {text && <span>{text}:&nbsp;</span>}
    12 |     <FormattedDate value={date} />
    13 |     &nbsp;

Here's how my ponent 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 ponent="p" gutterBottom>
    {text && <span>{text}:&nbsp;</span>}
    <FormattedDate value={date} />
    &nbsp;
    <FormattedTime value={date} />
  </Typography>
);

I am not able to understand why "p" is not an acceptable value for ponent prop. I tried it with "h1" and "h2" which fails in the same way and apparently, the official demo also uses the string.

Is there anything I am missing?, I don't want to ignore this with // @ts-ignore, but want to fix this.

• javascript
• reactjs
• typescript
• material-ui

Share Improve this question Follow asked Oct 16, 2019 at 13:24 0xC0DED00D0xC0DED00D 20.4k2222 gold badges125125 silver badges197197 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Had this in 2021, the problem was that I was spreading HTMLAttributes of an input against InputBase, while I should have properly spreaded InputBaseProps instead.

In my case it was related to an input, but same can be replicated for every ponent: as long as you use a material UI ponent, you should provide the properties it asks and properly set the correct props types if you use/extend them.

Example that gives error:

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

(in this ccase, an error was raised on color)

Proper way to do this:

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

As per reference document provided by Material UI for Typography (https://material-ui./api/typography/)

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

variantMapping has these mapping so going forward if you want to use <p> tags you can use variant type as body1 or body2 instead of ponent prop.

I have this since I updated to material-ui/[email protected] and [email protected].

I managed to silence the errors by using ponent={'div' as any} so I'm posting this as a temporary answer, but I do think there must be a better fix ing up.