MUI React 组件不渲染

Question

Just started to learn react, and using the mui library.

I installed the MUI library with

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

I also installed the roboto font, and the icons.

Then i made a simple app that should just display MUI button.

App.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;

Index.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 />);

The three buttons have been copied directly from the library. When I run the app with npm start the page remains empty. The compilation is successful, there are no errors whatsoever. When i remove the buttons, the <h2> Hello World </h2> suddenly renders. When the buttons are left in the code, even the <h2> title disappears.

Why are the components not rendering?

Answer 1

Found the solution.

In my several attempts to get this to work I created multiple apps. Whenever I created the app using npm create-react-app I would then install the MUI library as described above.

The issue was that I did not cd to the app directory before installing the library. After changing directories the Buttons properly rendered.

Answer 2

use this for import

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