Software systems to innovate and grow

Getting Started with Material UI

By Carlos Taborda October 17, 2019 10 mins read

UI and UX design happen to be one of the most basic pillars of modern web development, and therefore is also something that could make or break your website in a competitive space. Throughout the years, tech giants like Google and Twitter have come up with their own design languages, which helps to maintain consistency throughout all of their products and services.

Material design is the primary design language used by Google, providing a clean and professional look to web and mobile apps. This is a result of applying grid-based layouts, depth effects and animations. Thankfully for us, the Material design team encourages developers to implement interfaces for different platforms. Those platforms can then be used by other developers to empower their own apps and help them to use the latest and greatest design features from Material design. Material UI happens to be one such interface, or library, providing components for a highly customizable React apps used in different scenarios.

Material UI Setup:

Let’s begin by installing Material UI in an example React project. Assuming you have initialized a React app using create-react-app, getting started with Material UI is fairly simple.

First, install the actual library.

Next, you need to access the Roboto font, which is the font Material design relies on to provide font consistency. To do that through Google Web Fonts, you can use this import in the index.html file.

Material UI comes with its own icons, which can be used to import using two different methods:

  1. Font Icons

To use the Icon component, simply import the material icons:

  1. SVG Icons

To use the SVG Icons that come with Material UI, install the @material-ui/icons package.

That’s it! Now your setup is done and you can begin using Material UI components.

Creating a simple app using common Material UI components:

Let’s try out the most common Material UI components and create a simple website consisting of:

  1. Header
  2. Blog section with grid
  3. Contact form
  4. Footer

1. Header

For the header, use a component called AppBar from the library. The full list of components is available in the documentation, with API specification and examples.

After importing the AppBar and Toolbar components, wrap the header content with them and that should be enough to get started.

Simple enough, but what do all these components do?

  • AppBar: Defines the top most component of the header.
  • Toolbar: Defines the actual contents of the AppBar.
  • Container: Ensures the Toolbar has a fixed width in the middle of the page, we often use this component throughout the application to ensure consistency with the width.
  • Typography: We use this component to display text. Similar to the container component, it ensures that the text is consistent throughout the application.

Note how these components take different props, which can be used to customize them.

Let’s create a Hero component to display under the header.

We’re using the same components here as well; however, we’re injecting styles through the useStyles() function. So where are we getting that from?

Material UI uses CSS in JS for styling. For that, import makeStyles from @material-ui/core/styles, where you can then define all the styles.

Now if we render our CustomAppBar and Hero components in App.js, this is what you should get:

Getting Started with Material UI

2. Blog

For the blog component, display a grid of articles with the article heading and a “Read more” button.

The following new components are used in this section:

  • GridList: Defines the wrapper for the grid. We can specify the number of columns and spacing among other things.
  • GridListTile: Defines each tile that exists in the grid. The ‘cols’ prop determines how many columns that tile should take within the grid.
  • Card, Card Header and Card Actions: These components are used to define a Card as per the Material design specs. We can also use a couple of other components including CardContent to display content within these cards.
  • Button: A simple button. There are three variants available to choose from: text, outlined & contained. It also takes a number of props, which can be found in the API documentation.

This is what the blog section looks like using the Material UI components,

Getting Started with Material UI

3. Contact Form

The contact form consists of three inputs and a submit button.

You’ll use a TextField component for the inputs. Similar to the Button component, TextField also has multiple variants: standard, outline & filled.

Form handling is done just like any other form. Here, we’re using the useState Hook to handle the state.

This is what a new Contact component looks like.

Getting Started with Material UI

4. Footer

Just like the header, here you’ll use the AppBar component again. Nothing new.

And it will look like…

Getting Started with Material UI

Other Components:

That was a fairly simple usage of some common Material UI components, just to give you a taste. However, there are many more components that you should also know about.

  • Selects, switches and sliders are some good options for built-in input components.

Getting Started with Material UI

  • Bottom Navigation is useful for navigation for smaller screens and mobile views.

Getting Started with Material UI

  • Breadcrumbs can be useful for multi-stage navigational components.

Getting Started with Material UI

  • Drawers are sliding menus that are often used in mobile views for the main navigation.

Getting Started with Material UI

  • Tables are useful to show data in a tabular form. They are highly customizable as well, and also support pagination and virtualization.

Getting Started with Material UI

  • Avatars, Badges and Chips can be used to show graphical data as well as secondary information.

Getting Started with Material UI

  • Apart from these, there are a bunch of different utility components including Modal, Transitions Popover etc. That have their own specific use cases.

Material UI Themes:

Material UI provides a createMuiTheme function which is used to create and inject your own theme into components. By creating a global theme, we can easily modify the complete web app without having to go into every single component and manually altering the values.

Material UI comes with a default theme, which already has all the values set for each key. This is why, using color=”primary” works in different components, as it fetches the value for the ‘primary’ key in the default theme.

To alter the default theme, you need to use the createMuiTheme() function to override the values of the keys we want to change.

Here, you’re only updating the palette’s primary and secondary colors. The red and green colors are coming from Material UI itself. The reason for those colors instead of creating your own through hex values is because Material UI colors come with default values for different shades of the color, which can be useful as createMuiTheme can calculate the light and dark version of those colors automatically.

Now, all you have to do is wrap the components with the ThemeProvider component, and pass in the theme object you created for it to take effect.

Once you do that, all the changes reflected throughout the application should appear. Everywhere you set the color props to primary or secondary, the colors will change to reflect the values you used when overriding the theme above.

Getting Started with Material UI

That was pretty easy. What else can we do?

Since createMuiTheme applies the theme globally, you can easily switch the theme to a dark variant. Simply include type: “dark” in the theme object, and you’re set.

For the changes to take effect include the CssBaseline component as a child of ThemeProvide.

Getting Started with Material UI

That’s it, by using only one line, you can turn the theme of your app upside down.

Wrapping Up

As you might have noticed, once you get started with Material UI, it’s really easy to create, modify and style components. Often, when you don’t have a design in mind for a project, it’s best to use tried and tested design languages such as Material Design, and Material UI, which both provide a great rendition for ReactJS.

Material UI v4 was released recently and happens to be the first major update after v1. These changes were made after the Material UI team conducted thorough tests and surveys resulting in a better experience for developers. The update includes performance upgrades for React Hooks, CSS Specificity, and much more. The team has big plans for the future, including fully supporting styled-components and adding more components from the Material Design language.

You can read more about v4 here.