Chapter 12: Styling the Frontend with React MUI

This chapter explains how to use MUI components in our frontend. We will use the Button component to show the styled buttons. We will also use MUI icons and the IconButton component. The modal form input fields are replaced by TextField components.

In this chapter, we will cover the following topics:

• Using the MUI Button component in our frontend
• Using the MUI Icon and IconButton components in our frontend
• Using the MUI TextField component in our frontend

Technical requirements

The Spring Boot application that we created in Chapter 5, Securing and Testing Your Backend, is required, together with the modification from Chapter 10, Setting Up the Frontend for Our Spring Boot RESTful Web Service (the unsecured backend).

We also need the React app that we used in Chapter 11, Adding CRUD Functionalities.

The following code samples available at the GitHub link will also be required: https://github.com/PacktPublishing/Full-Stack-Development-with-Spring-Boot-and-React/tree/main/Chapter12.

Check out the following video to see the Code in Action: https://bit.ly/3x04wnw

Using the Button component

Execute the following steps to implement the Button component:

1. Let's first change all the buttons to use the MUI Button component. Import Button to the AddCar.js file:

   // AddCar.js
   import Button from '@mui/material/Button';

2. Change the buttons to use the Button component. In the list page, we are using the contained button (variant="contained") and in the modal form, we use the text buttons (default).

The following code shows the AddCar component's return statement with the changes:

// AddCar.js
return(
    <div>
      <Button variant="contained" onClick={handleClickOpen}>
        New Car
      </Button>
      <Dialog open={open} onClose={handleClose}>
          <DialogTitle...

Using icon components

MUI provides prebuilt SVG icons that we have to install by using the following command in the terminal:

npm install @mui/icons-material

Let's first implement the DELETE button in the grid. The MUI IconButton component can be used to render icon buttons. The @mui/icons-material package that we just installed contains lots of icons that can be used with MUI.

You can find the list of icons available from the MUI documentation. We need an icon for our DELETE button; therefore, we will use an icon called DeleteIcon:

1. Open the Carlist.js file and add the following imports:

   // Carlist.js
   import IconButton from '@mui/material/IconButton';
   import DeleteIcon from '@mui/icons-material/Delete';

2. Next, we will render the IconButton component in our grid. We will modify the DELETE button in the code where we define the grid columns. We change the button element to the IconButton component and render DeleteIcon inside the IconButton...

Using the TextField components

In this section, we'll change the text inputs in the modal forms using the MUI TextField and Stack components:

1. Add the following import statement to the AddCar.js and EditCar.js files:

   import TextField from '@mui/material/TextField';
   import Stack from '@mui/material/Stack';

2. Then, change the input elements to the TextField components in the add and edit forms. We are using the label prop to set the labels of the TextField components. The first TextField component contains the autoFocus prop, and the input will be focused on this field. There are three different variants available, and we are using the standard one.

The text fields are wrapped inside the Stack component to get spacing between the components and to set the top margin:

// AddCar.js, do the same modifications to the EditCar.js file
return(
     <div>
      <Button variant="contained...

Summary

In this chapter, we finalized our frontend using MUI, which is the React component library that implements Google's Material Design. We replaced the buttons with the MUI Button and IconButton components. Our modal form got a new look by using the MUI TextField component. After these modifications, our frontend looks more professional and uniform.

In the next chapter, we will focus on frontend testing.

Questions

1. What is MUI?
2. How should you use different Material-UI components?
3. How do you use MUI icons?

Further reading

Packt has other great resources available for learning about React. These are as follows:

• React – The Complete Guide by Academind GmbH:
• React 17 Design Patterns and Best Practices – Third Edition by Carlos Santana Roldán: https://www.packtpub.com/product/react-17-design-patterns-and-best-practices-third-edition/978800560444