How to set up and Implement Material UI with React.js

React is a JavaScript framework for building frontend applications. On the other side, Material UI is a library that provides ready and pre-made components ‌you can use to build your frontend applications. It provides different UI elements, such as buttons, icons, text fields, etc. These ready-to-use Material UI components help speed up your application development process. All you have to do is import the elements and use them in your frontend application.

In this guide we will learn how to add Material UI to a React.js application and create a React component that uses Material UI.

Prerequisites

• Ensure you have Node.js installed to be able to run your React application.

• Ensure you have basic level knowledge of working with the React.js framework.

Set the React Application

First, we need to create a React app that will use the Material UI components. Go ahead and create a React application just as you would have done it with any React-based project.

First, create your project folder where you want the React app to live. Change directory to this newly created folder. Then scaffold a React application using the create-react-app and npx as follows:

npx create-react-app react-with-material-ui

You can go ahead and check more command tags you can use. For example, the package manager you want to use, or if you want to run React with typescript. Check this guide for more insights.

Once the above command is executed and the React application is created, access the newly created directory:

cd react-with-material-ui

Then run this command to test if the created app is working correctly.

npm start

Test the application on the browser using the localhost URL:

http://localhost:3000/

Installing Material-UI

To shift Material UI to React, we will use the MUI library. This will allow you to have access to different functionalities that you need to create Material UI-based components. Go ahead and install MUI to your React app using the following command:
npm install @mui/material @emotion/react @emotion/styled

If you open your project package.json file, MUI dependencies will be available for you.

"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@mui/material": "^5.8.4",

Now create a React component using MUI

Using Material-UI with React

Let’s look at an example that shows how to create a React component with MUI.

Go ahead and create a components folder inside the src directory of your React project. Inside the components folder, create a form.js. Then follow these steps:

There are many elements that you can use. MUI provides elements of different categories such as Inputs (Button, Textfield, Checkbox, Select), Data display (Topography, Table, Icon, Avatar, List), Layout (Box, Container, Grid), Feedback (Alert, Dialog, Snack bar, Skeleton), Surfaces (App bar, Card), Navigation (Menu, Drawer, Tabs, Pagination, Bottom navigation), etc. Check out this guide to learn more. Each of these elements can be used in your React application.
In this example, we will create a basic form that shows these elements in React.

To use MUI, first import the elements you want to use in your form.js file:

1
2
3
4
5
6
7
8
9
import {
  TextField,
  Button,
  Typography,
  Box
} from '@mui/material';
import React, {
  useState
} from 'react';

Create a state for an email and password as follows:

1
2
3
4
export default function FormData() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
}

Now to use MUI, add return as follows:

1
2
3
4
5
export default function FormData() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  return ()
}

All the MUI elements will be executed inside return. If you are using the class components this would be render instead of return.
Let’s now use MUI elements. This form will be wrapped within a box layout.

1
2
3
4
5
6
7
8
9
<Box
   sx={{
     display: 'flex',
     flexDirection: 'column',
     '& .MuiButton-root': { width: '15ch' },
     '& .MuiTextField-root': { width: '50ch' }
   }}
> 
</Box>

In this case, the box will have its layout properties such as display and flex. We are setting width for a button and text field. In this case, we will have two MUI text fields. Defining a reusable element with such properties makes your code clean and non-respective.
Go ahead and add these elements inside the box layout:

• MUI Typography:

1
2
3
<div>
   <Typography sx={{ mt: 3 }} align='center' color='primary' variant="h5">Please Login to your Account!</Typography>
</div>

• An email TextField:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>
   <TextField
     onChange={(event) => setEmail(event.target.value)}
     value={email}
     id='email'
     label='Email'
     type='email'
     variant='outlined'
     margin='normal'
     required
     fullWidth
     align='center'>
   </TextField>
</div>

• A password TextField:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div>
   <TextField
     onBlur={(event) => (event)}
     value={password}
     onChange={(event) => setPassword(event.target.value)}
     name='password'
     id='password'
     label='Password'
     type='password'
     variant='outlined'
     margin='normal'
     align='center'
     fullWidth
     required>
   </TextField>
</div>

• MUI Button:

1
2
3
4
5
6
7
8
9
<div>
   <Button
     type='submit'
     align='center'
     variant='contained'
     color='primary'
     onClick={() => { alert('You have Successfully Loged in!') }}>LogIn
   </Button>
</div>

Finally, you have this simplistic MUI React form.

And of course, you can go ahead and add more elements based on the component you want to design.