Typescript props not matching component props when using withStyles HOC from Material UI

Question

i have class component that is wrapped in withStyles HOC from material-ui:

type State = {
    activeConversationID: number | null,
    openNewMessageBox: boolean,
    conversations: Conversation[] | null,
}

const styles = createStyles({
    messengerContainer: {
        width: "100%",
        height: "88vh",
        position: "relative",
        display: "flex",
    },
    floatingButton: {
        position: "absolute",
        background: "#4766B0",
        color: "#FFF",
        bottom: 20,
        left: 290,
    }
});

interface Props extends WithStyles<typeof styles> {
    conversations: fetchReturnType | WP_Error,
    classes: any,
}

class MessagesContainer extends Component<Props, State> {
    static contextType = ChatSocketContext;

    constructor(props, context) {
        super(props, context);

        this.state = {
            activeConversationID: null,
            openNewMessageBox: false,
            conversations: null,
        }
    }

    /** State functions */
    changeActiveConversation = (ID: number) => {
        this.setState({
            activeConversationID: ID,
        })
    }

    toggleNewMessageBox = (_: any, should_reload_page_after_submit: boolean = false) => {
        const { openNewMessageBox } = this.state;

        this.setState({
            openNewMessageBox: !openNewMessageBox,
        }, () => should_reload_page_after_submit ? window.location.reload() : null)
    }





    render() {

        const { classes } = this.props;

        return (
            <Paper className={classes.messengerContainer}>
                <Fab onClick={this.toggleNewMessageBox} aria-label="add" className={classes.floatingButton}>
                    <AddIcon />
                </Fab>
            </Paper>
        )
    }
}

export default withStyles(styles)(MessagesContainer);

Everything seems fine, but when I imported this component to my page file, when i try to use "conversations" props, it giving me this error:

Type '{ conversations: fetchReturnType | WP_Error; }' is not assignable to type 'IntrinsicAttributes & Pick<{}, never> & StyledComponentProps<"messengerContainer" | "floatingButton"> & { children?: ReactNode; }'.

Property 'conversations' does not exist on type 'IntrinsicAttributes & Pick<{}, never> & StyledComponentProps<"messengerContainer" | "floatingButton"> & { children?: ReactNode; }'

Here is my "page file" for reference:

import React from 'react';
import { NextPage, NextPageContext } from "next";
import MessengerController from "../../api/controllers/Messenger/Messenger.controller";
import { fetchReturnType, WP_Error } from "../../api/controllers/types/Messenger.types";
import MessagesContainer from "../../components/Layout/Profile/MessagesContainer2";


const Messages: NextPage<{ conversations: fetchReturnType | WP_Error }> =
    ({ conversations }) => <MessagesContainer conversations={conversations} />;

Messages.getInitialProps = async (_: NextPageContext) => {
    const messenger = new MessengerController();
    const conversations = await messenger.fetchAll();

    return {
        conversations,
    }
}

export default Messages;

Strange, because without withStyles i got no errors. I used withStyles alot and in this particular case i want to use it rather than functional component with hook.

Brian Brian · Accepted Answer · 2019-11-22T04:27:09

Have you tried

export default withStyles<Props>(styles)(MessagesContainer);

or maybe you'll find out more info with

const defaultExport = withStyles<Props>(styles)(MessagesContainer);
export default defaultExport:React.Component<Props>

Typescript props not matching component props when using withStyles HOC from Material UI

1 Answers