Question

我想使用@ emotion / styled从material-ui中对组件进行样式设置，但出现此错误。

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

我曾尝试按照某些人的建议降级到打字稿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

将通用参数设置为空对象可以解决此问题。

import Cocoa        // (or UIKit for iOS)
import SceneKit
import PlaygroundSupport;

// create a scene view with an empty scene
var sceneView = SCNView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
var scene = SCNScene()
sceneView.scene = scene

// have it show in your playground
PlaygroundPage.current.liveView = sceneView;

// a camera
var cameraNode = SCNNode()
cameraNode.camera = SCNCamera()
cameraNode.position = SCNVector3(0, 0, 3)
scene.rootNode.addChildNode(cameraNode)

var origin = sceneView.unprojectPoint(SCNVector3(0,0,0))
var viewWidth = sceneView.frame.width;
var topRight = sceneView.unprojectPoint(SCNVector3(sceneView.frame.width, 0, 0));
var scale = 2 * (topRight.x - origin.x) / sceneView.frame.width

var container = SCNNode()
origin.z *= -1
origin.x = -2 * topRight.x;
origin.y = -2 * topRight.y;

container.position = origin;
container.scale = SCNVector3(scale, -scale, scale)
cameraNode.addChildNode(container);

func addBox(w:CGFloat, h:CGFloat, x:CGFloat, y:CGFloat) {
    let box = SCNNode(geometry: SCNPlane(width: w, height: h))
    box.geometry?.firstMaterial?.diffuse.contents  = NSColor.red  
    //SCNPlane geometry is still center-origin    
    box.position = SCNVector3(x + w / 2, y + h / 2,0)
    container.addChildNode(box)
}

addBox(w: 10, h:10, x: 290, y:290)
addBox(w: 10, h:10, x: 0, y:0)
addBox(w: 10, h:10, x: 0, y:290)
addBox(w: 10, h:10, x: 290, y:0)

Answer 2

根据 Nalhin 的回复，这是 TextFieldProps 的正确类型定义。

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

使用Emotion样式+ material-ui +打字稿，类型实例化过深，甚至可能无限

2 个答案: