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

Question

我正在尝试从Material-UI 1.x更新到Material-UI 3.9.2 。

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

在此示例中，我减少了一个问题，但不知道为什么键入错误（ 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的输入当前有点破损。 但这是另一个问题。