I encountered an issue when styling a component imported from the Material-UI library using the styled API (@emotion/styled).
Error:(19, 5) TS2589: Type instantiation is excessively deep and possibly infinite.
Despite attempting to downgrade to typescript 3.5.3 as per some recommendations, the problem persists.
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;