reactjs MUIReact组件未呈现

z8dt9xmd  于 2022-12-26  发布在  React
关注(0)|答案(1)|浏览(138)

刚开始学习reaction,并使用梅库。
我安装了MUI库
第一个月
我还安装了roboto字体和图标。
然后我做了一个简单的应用程序,应该只是显示MUI按钮。

    • 应用程序js**
import Button from '@mui/material/Button';

function App() {
  return (
    <div >
      <h2>Hello World!</h2>
      <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
      
    </div>
  );
}

export default App;
    • 索引. js**
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

这三个按钮是直接从库中复制的。当我用npm start运行应用程序时,页面保持空白。编译成功,没有任何错误。当我删除按钮时,<h2> Hello World </h2>突然呈现。当按钮留在代码中时,甚至<h2>标题也消失了。
为什么组件不渲染?

2ic8powd

2ic8powd1#

找到解决办法了。
在我的几次尝试中,我创建了多个应用程序。每当我使用npm create-react-app创建应用程序时,我都会如上所述安装MUI库。
问题是在安装库之前我没有将cd添加到应用程序目录。更改目录后,按钮正确呈现。

相关问题