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;

这是错误：

enter image description here

Answer 1

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

^{请参见Theming - Material-UI。}

请参见Higher-order component API。

Answer 2

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

您有两个选择：

将您的类组件转换为功能组件。
使用高阶组件as in material-ui docs

我个人推荐第一种方法，因为这已成为React开发中的新标准。 This tutorial may help you get started with functional components 和check the docs for React Hooks

Answer 3

如果您已经创建了功能组件，但仍然遇到此问题...接下来要查找的是依赖项版本。

我尝试了一个新的stackblitz project来测试Material-ui组件，但收到此错误。我的依赖项是：

反应16.12

react-dom 16.12

@ material-ui / core 4.9.14

所以我不得不使用react@latest和react-dom@latest更改为最新的React版本，这使我了解以下内容：

反应16.13.1

react-dom 16.13.1

@ material-ui / core 4.9.14

在这里共享，以便可以帮助遇到此问题的其他人...感谢this post的提示

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

3 个答案: