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

IT技术 reactjs material-ui
2021-05-13 11:26:17

我刚刚开始使用 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;

这是错误：

在此处输入图片说明

3个回答

material-uimakeStyles函数仅在函数组件内部起作用，因为它在内部使用了新的 React Hooks API。

您有两个选择：

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

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

使用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

请参阅主题 - Material-UI。

请参阅高阶组件 API。

如果您已经创建了一个功能组件并且仍然遇到这个问题......接下来要寻找的是依赖版本。

我尝试了一个新的stackblitz 项目来测试 material-ui 组件并出现此错误。我的依赖是：

react 16.12

react DOM 16.12

@material-ui/core 4.9.14

所以我不得不使用最新的 react 版本react@latest，react-dom@latest这让我得到了以下内容：

react 16.13.1

react DOM 16.13.1

@material-ui/core 4.9.14

在这里分享，以便它可以帮助遇到此问题的其他人......感谢这篇文章的提示

其它你可能感兴趣的问题
上一篇使用 immutable.js 优于 Object.assign 或扩展运算符的优点 下一篇如何直接在 G 代码中编写圆弧？