React - Material-UI - Typescript:makeStyles 钩子在函数组件内给出了无效的钩子调用

时间:2021-03-14 20:35:21

标签: reactjs typescript material-ui makestyles

我真的不明白我做错了什么。

我正在使用 (javascript) 文档中描述的 makeStyles 钩子,并且我得到了这个 Invalid Hook Call。我使用的是 TypeScript 4.1.2、React 17.0.1 和 React Types 17.0.0。

这是组件代码:

import React from 'react';
import { Theme, makeStyles } from '@material-ui/core/styles';

interface Props
{
    isVisible: boolean;
}

const useStyles = makeStyles( ( theme: Theme ) => ( {
    root: {
        background: 'red',
        height: 100,
    },
} ) );

const Nav: React.FC<Props> = ( props: Props ) =>
{
    const { isVisible } = props;

    const classes = useStyles( {} );

    return (
       <div className={classes.root}>

       </div>
    );
};

export default Nav;

Error message:

1 个答案:

答案 0 :(得分:1)

答案比我想象的要简单。似乎使用 "react-scripts":"4.0.3" 时,代码有效。我不记得我之前使用的是哪个版本的 cra(我在检查之前更新了它),但最新版本看起来可以正常工作。

这是我所做的:

  1. 我在我的 git 中创建了一个新分支。
  2. 我完全删除了该应用
  3. 我在终端输入 npm i -g create-react-app
  4. 我创建了一个新的 React 应用:create-react-app <your file> --template typescript
  5. 最后我添加了依赖项和库:npm i @material-ui/core @material-ui/icons @material-ui/lab <other-libraries-here> ... @types/material-ui <other-types-here> ...
  6. 我像以前一样更改了 material-ui documentation 建议的 tsconfig.json 文件(我将 strictNullChecks 保留为 false 作为个人偏好)
  7. 我使用 npm/yarn start 运行了启动脚本。

我希望这个答案可以帮助遇到这个问题的人!快乐黑客!