Reader small image

You're reading from  Full Stack Development with Spring Boot 3 and React - Fourth Edition

Product typeBook
Published inOct 2023
PublisherPackt
ISBN-139781805122463
Edition4th Edition
Right arrow
Author (1)
Juha Hinkula
Juha Hinkula
author image
Juha Hinkula

Juha Hinkula is a software development lecturer at Haaga-Helia University of Applied Sciences in Finland. He received an MSc degree in Computer Science from the University of Helsinki and he has over 17 years of industry experience in software development. Over the past few years, he has focused on modern full stack development. He is also a passionate mobile developer with Android-native technology, and also uses React Native.
Read more about Juha Hinkula

Right arrow

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

lock icon
The rest of the page is locked
Previous PageNext Page
You have been reading a chapter from
Full Stack Development with Spring Boot 3 and React - Fourth Edition
Published in: Oct 2023Publisher: PacktISBN-13: 9781805122463

Author (1)

author image
Juha Hinkula

Juha Hinkula is a software development lecturer at Haaga-Helia University of Applied Sciences in Finland. He received an MSc degree in Computer Science from the University of Helsinki and he has over 17 years of industry experience in software development. Over the past few years, he has focused on modern full stack development. He is also a passionate mobile developer with Android-native technology, and also uses React Native.
Read more about Juha Hinkula