1

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

我正在使用makeStyles（javascript）文档中描述的钩子，我得到了这个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;

错误信息：

4

1 回答 1

1

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

这是我所做的：

  1. 我在我的 git 中创建了一个新分支。
  2. 我完全删除了应用程序
  3. 我在终端输入npm i -g create-react-app
  4. 我创建了一个新的反应应用程序：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. 正如我之前所做的那样，我更改tsconfig.json了material-ui 文档所建议的文件（我将其保留strictNullChecks为 false 作为个人喜好）
  7. 我使用npm/yarn start.

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

于 2021-03-14T21:54:43.460 回答