使用 Emotion 样式 + material-ui + typescript 的类型实例化过深并且可能是无限的

Question

我在使用 API (@emotion/styled).[=14= 样式化从 Material-UI 库导入的组件样式时遇到错误]

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

我试过按照某些人的建议降级到 typescript 3.5.3，但这并没有解决问题。

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;

Answer 1

将通用参数设置为空对象解决了这个问题。

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

Answer 2

根据 Nalhin 的回复，这是 TextFieldProps.

的正确类型定义

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

Answer 3

这是 Styled 组件存储库中的未决问题。

https://github.com/pmndrs/react-spring/issues/1515

我没有遇到这个问题 material ui。

下面的方法对我有用。

const BubbleContainer = styled(animated.div)<any>``

使用 Emotion 样式 + material-ui + typescript 的类型实例化过深并且可能是无限的

Type instantiation is excessively deep and possibly infinite with Emotion styled + material-ui + typescript

javascript

emotion

typescript

reactjs

material-ui