javascript - TypeScript-fel: Typen 'string' kan inte tilldelas typen för Typography

Jag försöker använda Typography-komponenten från material-ui med TypeScript, men jag får det här konstiga felet

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;

Så här ser min komponent ut

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

Jag kan inte förstå varför "p" inte är ett accepterat värde för component-prop. Jag försökte med "h1" och "h2" vilket misslyckades på samma sätt och tydligen använder den officiella demonstrationen också strängen.

Är det något jag missar? Jag vill inte ignorera detta med // @ts-ignore, men vill åtgärda det.

Svar #1

Hade detta 2021, problemet var att jag spred HTMLAttributes från ett input mot InputBase, medan jag istället borde ha spridit InputBaseProps på rätt sätt.

I mitt fall var det relaterat till en input, men samma kan replikeras för varje komponent: så länge du använder en Material UI-komponent bör du tillhandahålla de egenskaper den begär och korrekt ställa in rätt props-typer om du använder/utökar dem.

Exempel som ger fel:

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

(i det här fallet uppstod ett fel på color)

Korrekt sätt att göra detta:

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

Svar #2

Enligt referensdokumentet som tillhandahålls av Material UI för typografi (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 har dessa mappningar, så framöver om du vill använda <p>-taggar kan du använda varianttypen som body1 eller body2 istället för komponent-propen.

Relaterade artiklar