Invalid hook call. Hooks can only be called inside

问题:

I am just started to learn reactjs using material-ui but getting this error when apply style to my component. My 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;

and this is Error:

回答1:

material-ui makeStyles function only works inside function components, as it uses the new React Hooks APIs inside.

You have two options:

1. Convert your class component to a functional component.
2. Use a Higher Order Component as in material-ui docs

I personally recommend the first approach, as this is becoming the new standard in React development. This tutorial may help you get started with functional components and check the docs for React Hooks

回答2:

if you have created a functional component and still run into this issue... the next thing to look for are the dependency versions.

I tried a new stackblitz project to test a material-ui component and got this error. My dependencies were:

react 16.12

react-dom 16.12

@material-ui/core 4.9.14

So I had to change to latest react version using react@latest and react-dom@latest which got me to the following:

react 16.13.1

react-dom 16.13.1

@material-ui/core 4.9.14

Sharing here so that it can help other people who run into this... thanks to this post for the hint

回答3:

Use withStyles:

import {withStyles} from '@material-ui/core/styles'
import theme from '../theme'
// ...

const styles = theme => ({
    paper: {
        padding: theme.spacing(2),
        // ...
    },
    // ...
})

class App extends React.Component {
    render() {
        const {classes} = this.props
        // ...
    }
}

export default withStyles(styles(theme))(App)

theme.js:

import {createMuiTheme} from '@material-ui/core/styles'

export const theme = createMuiTheme({
    direction: 'rtl',
    typography: {
        fontFamily: [
            VAZIR_FONT_FAMILY,
            'Roboto',
            'Helvetica',
            'Arial',
            'sans-serif',
        ].join(','),
    },
    overrides: {
        MuiCssBaseline: {
            '@global': {
                '@font-face': [
                    ...vazirFamily,
                ],
            },
        },
    },
    // ...
}

export default theme

---

See Higher-order component API and https://material-ui.com/customization/theming/#api.