reactjs - 与 MUI 的 useStyles() react ，给我违反钩子(Hook)规则

Question

我遇到了可怕的 React“无效 Hook 调用”错误，而且我没有运行任何 Hook 。

1. 使用 CRA 安装 React
2. 已安装 MUI
3. 构建简单样式页面:

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    justifyContent: 'center',
  },
  layout: {
    minHeight: '230px',
  },
}));

export default useStyles;

1. 向组件添加样式:

import React from 'react';
import useStyles from './styles';
import Grid from '@material-ui/core/Grid';
import Container from '@material-ui/core/Container';

const SimpleComponent = (props) => {
  const classes = useStyles();
  return (
    <React.Fragment>
      <Container className={classes.root}>
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <div>Page Content</div>;
          </Grid>
        </Grid>
      </Container>
    </React.Fragment>
  );
};

export default SimpleComponent;

应用程序在 npm start 上没有返回任何错误，但页面本身给了我指向行 const classes = useStyles(); 的无效钩子(Hook)调用。那不是钩子(Hook)。

我试过重新 npm install 应用程序，我试过四处移动调用，无论我做什么我都得到相同的页面。看起来很多人都遇到过此配置的类似问题，但没有其他解决方案可以解决我的问题。

Hook 错误页面:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See[https://reactjs.org/warnings/invalid-hook-call-warning.html][1] for tips about how to debug and fix this problem.

SimpleComponent
src/Components/PaymentHistory/PaymentHistory.js:7
   4 | import Container from '@material-ui/core/Container';
   5 | 
   6 | const SimpleComponent = (props) => {
>  7 |   const classes = useStyles();
   8 |   return (
   9 |     <React.Fragment>
  10 |       <Container className={classes.root}>
View compiled  

Answer 1

请确保正确安装了所有依赖项(包括@material-ui/core)。

这是一个有效的 demo .