带有Material-UI高阶组件的打字稿错误类型

Question

我正在尝试从 Material-UI 1.x 升级到 Material-UI 3.9.2 。

我有一些组件，包括下面的示例，可以与高阶组件（HOC）正常工作，但是我很难将它们迁移到 3.9.2 < / em>。

在此示例中，我减少了一个问题，但不明白为什么键入错误（ Typescript 3.3.3 ）。在我看来，这与 MUI PropInjector 的工作方式保持一致。

这里是一个例子：

import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core';
import Dialog, { DialogProps } from '@material-ui/core/Dialog';

const styles = (theme: Theme) => createStyles({
    defaultPaperWidthSm: {
        backgroundColor: "#fafafa",
        minWidth: 320,
        maxWidth: 700
    },
    largePaperWidthSm: {
        backgroundColor: "#fafafa",
        width: 700,
        maxWidth: 700,
        [theme.breakpoints.up('md')]: {
            minWidth: 900,
            width: "unset",
            maxWidth: "80vw",
        }
    }
})

export default withStyles(styles)(
    function ResponsiveDialog(props: DialogProps & WithStyles<typeof styles>) {
        let { classes, className, ...otherProps } = props
        return <Dialog {...otherProps} />
    }
)

将其用作组件：

<ResponsiveDialog open={true}>
    <span>Blabla</span>
</ResponsiveDialog>

它返回此错误，但我不明白为什么：

  

键入'{children：Element;打开：布尔值； }'不能分配给'IntrinsicAttributes＆Pick＆StyledComponentProps <“ defaultPaperWidthSm” | “ largePaperWidthSm”>＆{子代？：ReactNode; }'。

     

类型'IntrinsicAttributes＆Pick＆StyledComponentProps <“ defaultPaperWidthSm”中不存在属性'open'| “ largePaperWidthSm”>＆{子代？：ReactNode; }'。

Answer 1

找到了！

如果我使用箭头功能，它将起作用：

export default withStyles(styles)(
    (props: DialogProps & WithStyles<typeof styles>) => {
        let { classes, className, ...otherProps } = props
        return <Dialog {...otherProps} />
    }
)

当我合并多个 HOC 时仍然存在问题，我感到 MUI 的输入类型目前有点混乱。但这是另一个问题。