无效的挂接调用。当使用material-ui将样式应用于类基础组件时，只能在函数组件的主体内部调用挂钩

Question

我刚刚开始使用material-ui学习reactjs，但是在将样式应用于我的组件时遇到此错误。它是我的代码：

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函数仅在函数组件内部起作用，因为它在内部使用了新的React Hooks API。

您有两种选择：

1. 将您的类组件转换为功能组件。
2. 如material-ui文档中那样使用更高阶的组件

我个人推荐第一种方法，因为这已成为React开发的新标准。 本教程可以帮助您开始使用功能组件 并检查文档以了解React Hooks