Неверный вызов крюка.Хуки могут быть вызваны только внутри тела компонента функции, если применить стиль к базовому компоненту класса с помощью Material-UI

Question

Я только начал изучать реагирование с использованием material-ui, но получаю эту ошибку, когда применяю стиль к моему компоненту.это мой код:

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;

и это ошибка:

Answer 1

Функция

material-ui makeStyles работает только внутри компонентов функции, поскольку она использует новые API React Hooks внутри.

У вас есть два варианта:

1. Преобразование вашего компонента класса в функциональный компонент.
2. Используйте компонент высшего порядка , как в материале-документациях

Я лично рекомендую первый подход, так как он становится новым стандартом в разработке React. Это руководство может помочь вам начать работу с функциональными компонентами и проверьте документы на React Hooks