在既不是 React 函数组件也不是自定义 React Hook 函数的函数中调用 React Hook “useStyles”

Question

根据标题，我在使用 React 实现 Material UI 时收到以下错误消息。

React Hook "useStyles" 在函数 "appBar" 中被调用，它既不是 React 函数组件也不是自定义 React Hook 函数

我已经查看了 hooks 的规则 (https://reactjs.org/docs/hooks-rules.html)，但我不确定我错过了什么。我们将不胜感激。

这是我的源代码：

import React from 'react';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
    },
  }),
);

export default function appBar() {
  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>
  );
}

Answer 1

尝试使用 PascalCase 重命名您的组件。

eslint-plugin-react-hooks 认为你的函数组件不是函数组件，因为它不是以大写字母开头的。

注意：react docs 声明 用户定义的组件在 JSX 中使用之前必须大写以避免被视为 HTML 元素。

在下面的示例中，我将组件命名为 AppBarWrapper，因为从 @material-ui/core/AppBar 导入的组件已经使用了名称 AppBar。

import React from 'react';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
    },
  }),
);

export default function AppBarWrapper() {
  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>
  );
}

Answer 2

首次安装：

npm install @material-ui/styles 

第二：阅读文档

" 入门 您可以使用 3 种可能的 API 来生成和应用样式，但它们都共享相同的底层逻辑。”

挂钩 API