Introducing Material-UI

Introduction

Using a CSS framework can greatly ease the process of making things look good. Material-UI is one of those CSS frameworks. Based on Google’s Material Design specification, it has many predefined themes and components that look good right out of the box. Similar to Bootstrap, it uses predefined style classes that we assign to our elements for style application.

Material-UI

The Material-UI library takes it a step further and provides pre-styled and customizable React components based on the Material Design specification that we can use to replace the raw built-in HTML elements. Essentially, it’s like having a set of React components that have Materialize CSS classes already assigned for us. It also provides cleaner ways to incorporate custom CSS classes into our project as well. While there is a bit of learning to do to understand the details of the components it provides, the end result we get with the look and feel of our applications is well worth the effort.

To properly utilize the Material-UI library, we need to add a reference to the Google icon and font stylesheets that Material-UI uses to our index.html file.

Next, we’ll create a module specifically for mapping the Material-UI components to Python objects by importing the Material-UI core module and mapping a few of the components in the pymui.py file.