问题描述
我真的不明白我做错了什么。
我正在使用 (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;
解决方法
答案比我想象的要简单。似乎使用 "react-scripts":"4.0.3"
时,代码有效。我不记得我之前使用的是哪个版本的 cra
(我在检查之前更新了它),但最新版本看起来可以正常工作。
这是我所做的:
- 我在我的 git 中创建了一个新分支。
- 我完全删除了该应用
- 我在终端输入
npm i -g create-react-app
- 我创建了一个新的 React 应用:
create-react-app <your file> --template typescript
- 最后我添加了依赖项和库:
npm i @material-ui/core @material-ui/icons @material-ui/lab <other-libraries-here> ... @types/material-ui <other-types-here> ...
- 我像以前一样更改了 material-ui documentation 建议的
tsconfig.json
文件(我将strictNullChecks
保留为 false 作为个人偏好) - 我使用
npm/yarn start
运行了启动脚本。
我希望这个答案可以帮助遇到这个问题的人!快乐黑客!