Reactjs 无效的钩子呼叫让我发疯？

您好，我是新的反应，现在我想在我的项目中使用MATERIAL-UI，但我得到了这个错误。请帮帮我

错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

React和渲染器的版本可能不匹配（例如React DOM）

你可能违反了钩子的规则

同一应用程序中可能有多个React副本 有关如何调试和修复此问题的提示，请参阅

我有Index.js组件：

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";
import registerServiceWorker from "./registerServiceWorker";

ReactDOM.render(
 
    <React.Fragment>
      <App />
    </React.Fragment>,
  
  document.getElementById("root")
);
registerServiceWorker();

import React from 'react'
import Layout from './Layout/Layout'

function  App() {
    return  <Layout/>
    
}
export default App

而Layout.js组件是：

import React from "react";
import useStyles from "./Styles";
function Layout() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <div className={classes.rightSideba}>right side bar</div>

      <div className={classes.mainPart}>main part</div>

      <div className={classes.leftSidebar}>left side bar</div>
    </div>
  );
}

export default Layout;

从“React”导入React；
从“/Styles”导入useStyles；
功能布局（）{
const classes=useStyles（）；
返回(
右侧栏
主体
左侧杆
);
}
导出默认布局；

---

谢谢

简单开始：您有什么React/React DOM版本

---

然后：您的环境（浏览器？）是否启动多个React/React DOM实例？（尤其是那些挂在周围的旧代码）

您的代码在这个沙箱中运行得很好：。

import React from "react";
import useStyles from "./Styles";
function Layout() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <div className={classes.rightSideba}>right side bar</div>

      <div className={classes.mainPart}>main part</div>

      <div className={classes.leftSidebar}>left side bar</div>
    </div>
  );
}

export default Layout;