MUI React 组件不渲染

Question

刚开始学react，用的是mui库。

我安装了 MUI 库

npm install @mui/material @emotion/react @emotion/styled

我还安装了 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>标题也会消失。

为什么组件不渲染？

Answer 1

找到了解决方案。

在我多次尝试让它工作的过程中，我创建了多个应用程序。 每当我使用npm create-react-app ，我都会按上述方式安装 MUI 库。

问题是我在安装库之前没有cd到 app 目录。 更改目录后，按钮正确呈现。

Answer 2

用它来导入

import { Button } from '@mui/material';