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

Question

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.

briosheje · Accepted Answer · 2021-07-06 10:02:43Z

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

Draken · Accepted Answer · 2019-10-17 10:25:02Z

1

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.

edited Oct 17, 2019 at 10:25

Draken

3,19614 gold badges38 silver badges56 bronze badges

answered Oct 16, 2019 at 13:46

Arpit Bhatia

1731 silver badge8 bronze badges

4 Comments

0xC0DED00D Over a year ago

Welcome to the Stack Overflow! There's no mention in the docs where they said support for component prop is going away. I do want to use component prop as it works, but TypeScript is behaving weird.

Arpit Bhatia Over a year ago

The description for the "component" clearly mentions The component used for the root node. Either a string to use a DOM element or a component. By default, it maps the variant to a good default headline component.

0xC0DED00D Over a year ago

Yeah, but it doesn't mean that it should throw errors for strings. We're not discussing here about whether to use component prop or not. I am asking how to fix the TypeScript error. I am asking this because I am using the component prop at multiple places in my project and I can't change all of them and manually test everywhere.

plumpNation Over a year ago

Same for me. I can use the code sandbox on the official site to change the root element to div or p (or whatever) using a string in the component prop, but typescript has suddenly started to show errors. @ArpitBhatia is the component prop going to be dropped? Is there some information about this that you can link us to? Is there am official reason why we should not use component prop that you have found?

gkri · Accepted Answer · 2019-11-12 12:19:20Z

0

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

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.

answered Nov 12, 2019 at 12:19

gkri

2,0414 gold badges20 silver badges29 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related