Invalid hook call. Hooks can only be called inside of the body of a function component when apply style to class base component with material-ui

Question

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:

Answer 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

Answer 2

Use withStyles:

App.js:

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

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

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

export default withStyles(styles)(App)

Root.js:

import React, {Component} from 'react'
import App from './App'
import {ThemeProvider} from '@material-ui/styles'
import theme from '../theme'

export default class Root extends Component {
    render() {
        return (
                <ThemeProvider theme={theme}>
                    <App/>
                </ThemeProvider>
        )
    }
}

theme.js:

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

const theme = createMuiTheme({
    palette: {
        primary: ...
        secondary: ...
    },
    // ...
}

export default theme

^{See Theming - Material-UI.}

---

See Higher-order component API.

Answer 3

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