Appel de crochet invalide. Les crochets ne peuvent être appelés à l'intérieur du corps d'un composant de fonction lors de l'application du style sur la composante de base de la classe avec du matériau-ui

Question

Je viens de commencer à apprendre ReactJs à l'aide de Matériel-UI, mais d'obtenir cette erreur lorsque vous appliquez un style sur mon composant. Mon code:

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        flexGrow: 1,
    },
}));

class NavMenu extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isOpen: false
        };
    }
    render() {
        const classes = useStyles();
        return (
            <div className={classes.root}>
                <AppBar position="static">
                    <Toolbar>
                        <IconButton
                            Edge="start"
                            className={classes.menuButton}
                            color="inherit"
                            aria-label="Menu"
                        >
                            <MenuIcon />
                        </IconButton>
                        <Typography
                            variant="h6"
                            className={classes.title}
                        >
                            News
                        </Typography>
                        <Button color="inherit">Login</Button>
                    </Toolbar>
                </AppBar>
            </div>
        );
    }
}
export default NavMenu;

et c'est une erreur:

Answer 1

si vous avez créé un composant fonctionnel et que vous rencontrez toujours dans ce numéro ... La prochaine chose à rechercher sont les versions de dépendance.

J'ai essayé un nouveau Stackblitz Project pour tester un composant Matériel-UI et obtenir cette erreur. Mes dépendances étaient:

réagir 16.12

react-DOM 16.12

@ matériau-ui/noyau 4.9.14

Je devais donc changer de version réactive à l'aide de react@latest et react-dom@latest Ce qui m'a eu pour ce qui suit:

réagir 16.13.1

react-DOM 16.13.1

@ matériau-ui/noyau 4.9.14

Partage ici pour que cela puisse aider d'autres personnes qui courent dans cette ... Grâce à - ce post pour le conseil