javascript - Typinstansering är extremt djup och möjligen oändlig med Emotion styled + material-ui + typescript

Jag får ett fel när jag försöker styla en komponent som importerats från Material-UI-biblioteket med styled API (@emotion/styled).

Error:(19, 5) TS2589: Type instantiation is excessively deep and possibly infinite.

Jag har försökt nedgradera till TypeScript 3.5.3, som några personer föreslog, men det löste inte problemet.

import * as React from 'react';
import styled from '@emotion/styled';
import TextField from '@material-ui/core/TextField';


const StyledTextField = styled(TextField)`
  margin:10px;
`;

interface InputProps {
  value: string;
  name: string;
  label: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

const Input: React.FC<InputProps> = ({ value, name, label, onChange }) => {
  return (
    <StyledTextField
      value={value}
      name={name}
      onChange={onChange}
      label={label}
    />
  );
};

export default Input;

Svar #1

Att sätta ett generiskt argument som ett tomt objekt löste problemet.

const StyledTextField = styled(TextField)<{}>`
  margin: 10px
`;

Svar #2

Som en fortsättning på Nalhins svar, är detta den korrekta typedeklarationen för TextFieldProps.

const StyledTextField = styled(TextField)<TextFieldProps>`
  margin:10px;
`;

Relaterade artiklar