【typescript】material uiのwithStylesをつけてreactのClass Componentをexportしたら、エラーがでた

環境

• react 16.8.5
• redux 4.0.1
• material-ui 3.9.2
• typescript 3.4.3
  • @types/react 16.8.10
  • @types/react-dom 16.8.3
  • @types/react-redux 7.0.5
  • ts-loader 5.3.3

エラー

material uiのwithStylesをつけてexportしたら、エラーがでた。
エラーの内容がよく理解できなかった。

UserHomeTemplate.tsx

TS2604: JSX element type 'UserHomeTemplate' does not have any construct or call signatures.

エラーが出たコード

とりあえず、いろいろ試して原因のコードを特定

import React from "react";
import * as Actions from "./redux/actions";
import { connect } from "react-redux";
import { bindActionCreators, compose } from "redux";
import withStyles, {
    WithStyles,
    StyleRules
} from "@material-ui/core/styles/withStyles";
import Grid from "@material-ui/core/Grid";


const styles = (theme: any): StyleRules => ({
    root: {
        ...
    }
});

interface PropsFromRedux extends React.Props<any> {
    ...
}

interface PropsFromParent extends React.Props<any> {
    ...
}

interface State {
    ...
}

class UserHomeTemplate extends React.Component<
    PropsFromRedux & PropsFromParent & WithStyles<typeof styles>,
    State
> {
    constructor(
        props: PropsFromRedux & PropsFromParent & WithStyles<typeof styles>
    ) {
        super(props);
        this.state = {
            ...
        };
    }

    render() {
        const { classes } = this.props;

        return (
            <Grid container justify="center">
                <Grid item xs={12} sm={7}>
                    ...
                </Grid>
            </Grid>
        );
    }
}

interface IStateToProps {
    ...
}
const mapStateToProps = (state: any) => ({
    ...
});

interface IDispatchToProps {
    ...
}
const mapDispatchToProps = (dispatch: any) =>
    bindActionCreators(
        {
            ...
        },
        dispatch
    );

// ここが原因
export default compose(
    withStyles(styles, { withTheme: true }),
    connect<IStateToProps, IDispatchToProps>(
        mapStateToProps,
        mapDispatchToProps
    )
)(UserHomeTemplate);

解決したコード

問題があったコードを以下に変更

export default connect<IStateToProps, IDispatchToProps>(
    mapStateToProps,
    mapDispatchToProps
)(withStyles(styles)(UserHomeTemplate));