我的 Material UI 按钮没有显示，也没有在我的网络应用程序中显示任何内容答案

【问题标题】：My Material UI button is not showing up and making nothing show up in my web app我的 Material UI 按钮没有显示，也没有在我的网络应用程序中显示任何内容
【发布时间】：2023-01-19 14:04:01
【问题描述】：

我正在尝试使用 Material UI 在我的 Web 应用程序中使用按钮，前端使用 ReactJS。我用终端命令安装了 Material UI

npm install @material-ui/core

我的代码如下所示：

import React from 'react';
import './Header.css';
import { Button } from '@material-ui/core';

function Header() {
  return (
    <div className="header">
      <div className="headerRight">
        <h1>Hi There</h1>
        <img
          className="headerIcon"
          src="https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg"
          alt=""
        />
        <div className="button">
          <Button>Click Me</Button>
        </div>
      </div>
    </div>
  );
}

export default Header;

编译器说“编译成功！”当我点击保存时，但当我在浏览器中查看该应用程序时，那里什么也没有。当我取出按钮时，其他所有内容都会显示，但当我将按钮放回原处时，什么也没有显示，我得到一个空白屏幕。我真的很沮丧试图弄清楚为什么 Material UI 按钮不起作用。请帮我。

我的应用程序.js代码看起来像这样

import './App.css';
import React from 'react';
import Header from './Header';
import Banner from './Banner';

function App() {
  return (
    <div className="App">
      <Header/>
      <Banner/>
    </div>
  );
}

export default App;

【问题讨论】：

<div> hiii </div>
请把它放在你的应用程序组件中并告诉我会发生什么？
如果我把它放在应用程序组件中，添加按钮不会显示任何内容。
你检查控制台了吗？那里有什么错误吗？
@CaptainApollo 确保如果你关闭了h1 标签，我编辑关闭。

标签： reactjs material-ui

【解决方案1】：

对我来说，问题是我在进入我的反应应用程序 (cd my-app) 之前安装了 MUI，因此 MUI 包位于我的反应应用程序的父“节点模块”目录中。

删除了父节点模块目录并在我的反应应用程序中重新安装了 MUI。

【讨论】：