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

问题


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:

enter image description here


回答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.



来源:https://stackoverflow.com/questions/56329992/invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-com


更多相关内容:请点击查看