TypeScript error: Type 'string' is not assignable to type for Typography

user_1079901 0
Viewed 5976

I am trying to use Typography component 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 component="p" gutterBottom>
       |               ^
    11 |     {text && <span>{text}:&nbsp;</span>}
    12 |     <FormattedDate value={date} />
    13 |     &nbsp;

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

I am not able to understand why "p" is not an acceptable value for component 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.

material-ui typescript reactjs javascript
3 Answers

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 component: as long as you use a material UI component, 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}
    />
  );
}
user_22757970

As per reference document provided by 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 has these mapping so going forward if you want to use <p> tags you can use variant type as body1 or body2 instead of component prop.

user_122142980

I have this since I updated to material-ui/core@4.6.0 and typescript@3.7.2.

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

user_44306400
Related