Reactjs react表示错误：尝试使用material makestyles时钩子调用无效

我是一个新的反应者，我正在尝试使用makestyles，这是如何：

在Header.jsx中：

import React from "react";
import UseStyles from "./Header_style";
function Header() {
  const classes =UseStyles();
  return (
    <div className={"Main-Header"}>
      <div className={"Header-Logo"}>
        <div className={classes.test}>test</div>
      </div>
    </div>
  );
};

export default Header;

但我有以下错误： ×

*编辑： 以下是我使用标题的方式：

import React, { Component } from 'react'
import Header from './component/heder/Header.jsx';

class App extends Component {
    constructor() {
        super();

        this.state = {
            monsters: [],
            searchField: ''
        };
    }
    render() {
        return (
            <Header/>
        );
      }
}


export default App;

import React，{Component}来自“React”
从“./component/heder/Header.jsx”导入标题；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
怪物：[]，
搜索字段：“”
};
}
render（）{
返回(
);
}
}
导出默认应用程序；

还有一件事，我也有以下错误：

---

当您在父组件的返回或呈现中放置

标题
组件时，请确保使用
而不是{Header}

此外，如果这不是问题，你可以检查这个链接，这是最重要的

同时发布如何呈现抛出错误的组件将非常有用

编辑*此外，您不需要使用函数调用makeStyles。因为您没有使用主题，所以可以使用如下对象调用makeStyles

const useStyles = makeStyles({
   test: {
     background: 'white',
     width: '100%'
   }
});

编辑和附加答案：

以下是一段来自：


导入makeStyles的方式：

从“@material ui/styles”导入{makeStyles}

如果以这种方式导入，则必须应用
@material ui/styles
模块

如果您在package.json中使用
@material ui/core
而未安装
@material ui/styles
，则可能会出现该错误，因为您没有模块
@material ui/styles

如果您只有
@material ui/core
，您仍然可以导入makeStyles，而无需安装独立的
@material ui/styles
，它们都包含在
@material ui/core
中

只需像这样导入即可：
从'@material ui/core/styles'导入{makeStyles}
各位，我找到了解决方案

必须与样式一起使用。
1）如何使用
标题
？2） ，所以您应该使用小写的“u”，并使其成为
useStyles
。我尝试了useStyles。没有任何变化。错误给出了无效钩子调用的3个原因。你有没有检查过这些规则并确认你没有违反这些规则？如果是，请包括您为验证所采取的步骤。正如我前面提到的，请包括您如何使用
标题
。我已经在index.js中更新了这篇文章。@giant，您在那里调用
ReactDOM.render（）
您是否从'react dom'导入了ReactDOM
？
import React, { Component } from 'react'
import Header from './component/heder/Header.jsx';

class App extends Component {
    constructor() {
        super();

        this.state = {
            monsters: [],
            searchField: ''
        };
    }
    render() {
        return (
            <Header/>
        );
      }
}


export default App;

const useStyles = makeStyles({
   test: {
     background: 'white',
     width: '100%'
   }
});