在 React 中使用 material-ui makeStyles 的钩子调用无效

Posted 2023-02-22

【中文标题】在 React 中使用 material-ui makeStyles 的钩子调用无效

【英文标题】：Invalid hook call using material-ui makeStyles in React

【发布时间】：2021-08-04 07:00:11

【问题描述】：

当我在浏览器中运行我的应用程序时，我收到了无效的钩子调用错误。当我在我的应用程序中使用 makeStyles 时出现错误（我通过删除它进行检查并且错误消失了）。有人可以帮我找出我做错了什么吗？这是我的代码：

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

const useStyles = makeStyles(
    header: 
        background: '#C4C4C4',
        textAlign: 'center',
        boxShadow: '0px 2px 2px #A9A9A9',
        fontFamily: 'PT Sans Caption',
        fontSize: '36px',
        marginBottom: '20px',
        paddingTop: '20px',
        textTransform: 'uppercase',
        position: 'fixed',
        top: 0,
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
    ,
);

const Header = (props) => 
    const classes = useStyles();
    const [ title ] = useState(props.title)

    return (
        <div className=classes.header>title</div>
    );
;
export default Header;

任何帮助都会很棒！

【参考方案1】：

我在您的代码中没有看到问题只是为了测试更改： 移除 useState

        <div className=classes.header>props.title</div>

或用于测试

<div className=classes.header>title</div>

【参考方案2】：

我不完全确定问题出在哪里，但我通过运行 np install、退出浏览器并运行 npm start 解决了这个问题。当浏览器重新加载时，错误消失了。