Using the Material UI component library

Material UI (https://mui.com/), or MUI, is the React component library that implements Google’s Material Design language (https://m2.material.io/design). Material Design is one of the most popular design systems today. MUI contains a lot of different components – such as buttons, lists, tables, and cards – that you can use to achieve a nice and uniform user interface (UI).

In this book, we will use MUI version 5. If you want to use another version, you should follow the official documentation (https://mui.com/material-ui/getting-started/). MUI version 5 supports Material Design version 2.

In this section, we will create a small shopping list app and style the UI using MUI components. In our app, a user can enter shopping items that contain two fields: product and amount. Entered shopping items are displayed in the application as a list. The final UI looks like the following screenshot. The ADD ITEM button...