React项目使用Material UI Button出现Invalid Hook Call错误求解

云上老周

2026-10-15

问题原因

你当前的报错由两个常见问题引发：

未安装对应版本的Material UI依赖，你提供的package.json依赖列表中没有@material-ui/core相关条目，直接导入未安装的组件库会触发内部hook调用异常
若已经安装过依赖，大概率是依赖安装时生成了重复的React副本，或是导入顺序不符合旧版JSX转换规则

解决步骤

首先安装适配React 17版本的Material UI v4稳定版，在项目根目录执行以下命令：

npm install @material-ui/core@4.12.4

调整App.js的导入顺序，将React导入放在最顶部，修改后代码如下：

import React from 'react';
import Button from '@material-ui/core/Button';
import logo from './logo.svg';
import './App.css';


function App() {
  return (
    <div className = "App">
      <header className='App-header'>
        <Button>Click here</Button>
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;