反应说错误：当我尝试使用材料 makestyles 时钩子调用无效

Question

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

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

Answer 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 的片段：

导入 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'

Answer 2

大家，我找到了解决方案！

必须使用 withStyles。