Typescript wrong type with Material-UI Higher Order Components

Question

I'm trying to update from Material-UI 1.x to Material-UI 3.9.2.

I had a few components, including the example below, that were working properly with Higher Order Components (HOC), but I have a hard time at migrating them to 3.9.2.

In this example, I reduced a problem and don't get why the typings are wrong (Typescript 3.3.3). It seems to me to be consistent with the way MUI PropInjector works.

Here is an example:

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} />
    }
)

Using it as a component:

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

It returns this error, and I don't get why:

Type '{ children: Element; open: boolean; }' is not assignable to type 'IntrinsicAttributes & Pick & StyledComponentProps<"defaultPaperWidthSm" | "largePaperWidthSm"> & { children?: ReactNode; }'.

Property 'open' does not exist on type 'IntrinsicAttributes & Pick & StyledComponentProps<"defaultPaperWidthSm" | "largePaperWidthSm"> & { children?: ReactNode; }'.

arvymetal arvymetal · Accepted Answer · 2019-02-19T18:46:32

Found it!

It's working if I use an arrow function:

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

There are still issues when I combine multiple HOC, I have the feeling MUI typings are currently a bit broken. But it's another problem.

Typescript wrong type with Material-UI Higher Order Components

1 Answers