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:
- Import the MUI
Button
component into theAddCar.tsx
andEditCar.tsx
files:// AddCar.tsx & EditCar.tsx import Button from '@mui/material/Button';
- Change the buttons to use the
Button
component in theAddCar
component. We are using'
text
'
buttons, which is the defaultButton
type.If you want to use some other button type, such as
'
outlined
'
, you can change it by using thevariant
prop (https://mui.com/material-ui/api/button/#Button-prop-variant).The following code shows the
AddCar
component’sreturn
statements with the changes...