react 说 Error: Invalid hook call when I try to use material makestyles答案

【问题标题】：react says Error: Invalid hook call when I try to use material makestylesreact 说 Error: Invalid hook call when I try to use material makestyles
【发布时间】：2021-08-24 21:05:07
【问题描述】：

我是新手，我正在尝试使用 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;

和 style.js ：

import {makeStyles} from '@material-ui/styles';
const UseStyles = makeStyles(theme=>({
    test: {
        backgroundColor: '#BDC3C7',
        color :'red !important',
        widtH : '18%'
    },

    }));
export default UseStyles;

但我收到以下错误： ×

Error: 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:

*编辑：这就是我使用 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;

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

【问题讨论】：

1) 你如何使用Header？ 2）hooks should be named like "useMyHook"，所以你应该使用小写的“u”并将其设为useStyles。
我试过 useStyles 。没有任何变化。
错误为无效的钩子调用提供了 3 个原因。您是否已通过它们并确认您没有违反这些规则？如果是这样，请包括您为验证所采取的步骤。就像我之前提到的，请说明你是如何使用 Header.

标签： reactjs material-ui jsx

【解决方案1】：

当您将 Header 组件放在父组件的返回或渲染中时，请确保您使用 <Header /> 而不是 {Header}

此外，如果这不是问题，您可以查看此链接，即official react thread on that error。

同时发布您如何渲染引发错误的组件将非常有帮助。

Edit* 此外，您不需要使用函数调用 makeStyles。由于您没有使用主题，因此您可以使用这样的对象调用 makeStyles

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

编辑和其他答案：

这是来自MUI's official page on styles的sn-p：

你导入makeStyles的方式：

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

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

如果您在 package.json 中使用 '@material-ui/core 并且尚未安装 @material-ui/styles，则可能会收到该错误，因为您没有模块 @material-ui/styles。

如果您只有@material-ui/core，您仍然可以在不安装独立的@material-ui/styles 的情况下导入makeStyles，它都包含在@material-ui/core 中。

只需像这样导入它： import { makeStyles } from '@material-ui/core/styles'

【讨论】：

@giant 在 index.js 中你调用ReactDOM.render() 你是import ReactDOM from 'react-dom' 吗？

【解决方案2】：

各位，我找到了解决办法！

必须使用 withStyles。

【讨论】：