Material UI 无效的钩子调用

Posted 2023-02-22

【中文标题】Material UI 无效的钩子调用

【英文标题】：Material UI invalid hook call

【发布时间】：2021-09-10 01:02:37

【问题描述】：

我正在为博客使用以下模板。但我想尝试 Material UI。但是当我添加 useStyles-Hook 时，我得到一个无效的钩子错误。有谁知道如何在不出错的情况下实现 Material UI。提前谢谢！

这是错误信息： 未处理的运行时错误 错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

您的 React 和渲染器版本可能不匹配（例如 React DOM） 您可能违反了 Hooks 规则 您可能在同一个应用程序中拥有多个 React 副本 有关如何调试和修复此问题的提示，请参阅 https://reactjs.org/link/invalid-hook-call。

import React from "react";
import  makeStyles  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) => (
  root: 
    flexGrow: 1,
  ,
  menuButton: 
    marginRight: theme.spacing(2),
  ,
  title: 
    flexGrow: 1,
  ,
));

export default function Navigation( categories ) 
  const classes = useStyles();
  return (
    <div>
      <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>
  );

【参考方案1】：

您的示例不包含 MaterialUI 部件。

你试过了吗：

import React from 'react';
import  makeStyles  from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles(
  root: 
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  ,
);

export default function Hook() 
  const classes = useStyles();
  return <Button className=classes.root>Hook</Button>;

https://material-ui.com/styles/basics/

【讨论】：

感谢您的回答，但我仍然收到无效的挂钩调用错误