Styling the Frontend with MUI

This chapter explains how to use Material UI (MUI) components in our frontend. We will use the Button component to show styled buttons. We will also use MUI icons and the IconButton component. The input fields in our modal forms will be replaced by TextField components.

In this chapter, we will cover the following topics:

• Using the MUI Button component
• Using the MUI Icon and IconButton components
• Using the MUI TextField component

At the end of the chapter, we will have a professional and polished user interface with minimal code changes in our React frontend.

Technical requirements

The Spring Boot application that we created in Chapter 5, Securing Your Backend, is required, together with the modification from Chapter 12, 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 13, Adding CRUD Functionalities.

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

Using the MUI Button component

Our frontend already uses some Material UI components, such as AppBar and Dialog, but we are still using a lot of HTML elements without any styling. First, we will replace HTML button elements with the Material UI Button component.

Execute the following steps to implement the Button component in our New car and Edit car modal forms:

1. Import the MUI Button component into the AddCar.tsx and EditCar.tsx files:

   // AddCar.tsx & EditCar.tsx
   import Button from '@mui/material/Button';
   

2. Change the buttons to use the Button component in the AddCar component. We are using 'text' buttons, which is the default Button type.

   If you want to use some other button type, such as 'outlined', you can change it by using the variant prop (https://mui.com/material-ui/api/button/#Button-prop-variant).

   The following code shows the AddCar component’s return statements with the changes...

Using the MUI Icon and IconButton components

In this section, we will use the IconButton component for the EDIT and DELETE buttons in the grid. MUI provides pre-built 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, which we just installed, contains lots of icons that can be used with MUI.

You can find a list of icons available in the MUI documentation (https://mui.com/material-ui/material-icons/). There is a search functionality, and if you click any of the icons in the list, you can find the correct import statement for a specific icon:

Figure 14.3: Material Icons

We need an icon for our DELETE button, so we will use an icon called DeleteIcon:

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

   // Carlist.tsx
   import...

Using the MUI TextField component

In this section, we’ll change the text input fields in the modal forms to the MUI TextField and Stack components:

1. Add the following import statements to the CarDialogContent.tsx file. Stack is a one-dimensional MUI layout component that we can use to set spaces between text fields:

   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. There are three different variants (visual styles) of text input available, and we are using the outlined one, which is the default variant. The other variants are standard and filled. You can use the variant prop to change the value. The text fields are wrapped inside the Stack component to get some spacing between the components and to set the top margin: ...

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 with 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 can you use different Material UI components?
3. How do you use MUI icons?

Further reading

• Another good resource for learning about Material UI is the MUI Design Resources (https://mui.com/material-ui/getting-started/design-resources/.)

Learn more on Discord

To join the Discord community for this book – where you can share feedback, ask the author questions, and learn about new releases – follow the QR code below:

https://packt.link/FullStackSpringBootReact4e