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

Question

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

我正在使用 (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;

Answer 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 运行了启动脚本。

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