How to Add Material-UI in React?

Introduction

In this article, we will explore how to integrate Material-UI, a popular UI component library, into a React application. Material-UI provides a wide range of pre-designed and customizable UI components that can enhance the visual appeal and functionality of your React projects. 

Prerequisites of React

• Familiarity with the HTML, JavaScript, and Bootstrap 
• node.js installed

Create React Project

To create a React app, use the following command in the terminal.

npx create-react-app matui

Open the newly created project in Visual Studio Code and install Material-UI, and run the following command in your React project's root directory.

npm install @material-ui/core

Now open the app.js file and add the following code.

import logo from './logo.svg';
import './App.css';
import Button from '@mui/material/Button';
function App() {
  return (
    <div className="App">
      <Button variant="outlined">Primary</Button>
      <Button color="primary" variant="contained">
        Click Me
      </Button>
    </div>
  );
}

export default App;

In the above code, we have added a Material-UI button to use any Material-UI component to import that component. In the App.js file, we added the following code at the top to the import button.

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

Now We use this component inside the App() function,

 <Button variant="outlined">Primary</Button>
      <Button color="primary" variant="contained">
        Click Me
      </Button>
    </div>

Now, run the project by using the 'npm start' command and check the result and how these buttons will look.

We can also use Icons with buttons. To add Icons, run the following command and install @material-ui/icons as a dependency.

npm install @mui/icons-material

Now open the app.js file and add the following code.

import logo from './logo.svg';
import './App.css';
import Button from '@mui/material/Button';
import LogoutIcon from '@mui/icons-material/ExitToApp';
import LoginIcon from '@mui/icons-material/AccountCircle';
function App() {
  return (
    <div className="App">
      <Button startIcon={<LogoutIcon />} color="secondary" variant="contained">
        Logout
      </Button>
      <Button startIcon={<LoginIcon />} color="primary" variant="contained">
        Login
      </Button>
      <Button endIcon={<LoginIcon />} color="primary" variant="contained">
        Login
      </Button>
    </div>
  );
}

export default App;

In the above code, we have imported Button components and Icons.

import Button from '@mui/material/Button';
import LogoutIcon from '@mui/icons-material/ExitToApp';
import LoginIcon from '@mui/icons-material/AccountCircle';

Now We use this component inside the App() function,

<div className="App">
      <Button startIcon={<LogoutIcon />} color="secondary" variant="contained">
        Logout
      </Button>
      <Button startIcon={<LoginIcon />} color="primary" variant="contained">
        Login
      </Button>
      <Button endIcon={<LoginIcon />} color="primary" variant="contained">
        Login
      </Button>
    </div>

Now, run the project by using the 'npm start' command and check the result and how these buttons will look.

Summary

This article provides a step-by-step guide on how to add Material-UI in a React application. It assumes familiarity with HTML, JavaScript, and Bootstrap, as well as having Node.js installed.