如何将HOC与compose（redux）结合使用？

Question

我有一个来自@ material-ui / core的命名为ThemeProvider的HOC，我想将其与compose一起使用。现在我有了这个组件：

import {hot} from 'react-hot-loader/root';

    interface IRoutesProps {
    isTokenVerifying: boolean;
    userPalette: IPalette;
}

const Routes = ({isTokenVerifying, userPalette}: IRoutesProps) => {
    if (isTokenVerifying) {
        return (
            <LoadIndicator
                id='large-indicator'
                height={50}
                width={50}
                elementAttr={{class: styles.loader}}
            />
        );
    }

    return (
        <ThemeProvider theme={defaultMaterialTheme(userPalette)}>
            <Switch>
                 ....
            </Switch>
        </ThemeProvider>
    );
};

const mapStateToProps = (state: RootState) => ({
    isTokenVerifying: getPendingTokenVerify(state),
    userPalette: getUserPalette(state),
});

export default hot(connect(mapStateToProps)(Routes));

如何通过compose做到这一点？我尝试过这种情况，但是没有用：

const ThemeProviderContainer = ({ children, userPalette }: any) =>
    <ThemeProvider theme={defaultMaterialTheme(userPalette)}>
        {children}
    </ThemeProvider>;

export default hot(
    compose(connect(mapStateToProps), ThemeProviderContainer),
)(Routes);