使用Material

我正在尝试从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; open：boolean; }'不能赋值为'IntrinsicAttributes＆Pick＆StyledComponentProps <“defaultPaperWidthSm”| “largePaperWidthSm”>＆{children？：ReactNode; }”。

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

找到了！

如果我使用箭头功能它是有效的：

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

当我结合多个HOC时仍然存在问题，我感觉MUI打字目前有点破碎。但这是另一个问题。