How to Use Material-UI in React

Material-UI is a library of components written in React for building user interfaces. Originally developed to unify the React framework (Facebook) and the Material Design system (Google), the library for Material-UI in React is maintained by an independent company of core developers, supported by community contributors.

If you are familiar with the look and feel of the Material Design system, marked by its use of elevation and motion, these components allow you to implement best practices of user interface design faster and easier in React.

Components are grouped into seven general categories, including:

1. Layout
2. Inputs
3. Navigation
4. Surfaces
5. Feedback
6. Data display
7. Utilities

Installation

Assuming that you have a React app (or an online sandbox) ready to go, let’s start with the npm installation of the Material-UI components. Installing Material-UI starts with the following command.

npm install @material-ui/core

This will install the core Material-UI components as a dependency of your React application. There is no further configuration or setup required to make the components work in your project. Each component can be imported from the @material-ui/core module as needed so as not to pollute the global namespace.

Colors and Variants

It is important to note the concepts of colors and variants and how they are used within the Material Design system. The below example adds a button component with the color primary and the variant contained.

import { Button } from "@material-ui/core"

export default function App() {
  return (
	<div className="App">
  		<h1>How to Use Material-UI in React</h1>
  		<Button color="primary" variant="contained">Test</Button>
	</div>
  );
}

Notice that the color property is not a hexadecimal color (#XXXXXX), as you would write in CSS, but rather an expressive label that communicates hierarchy. This is because Material-UI is based on an adaptable system and not a specific set of styles. The colors represented by this design system are customizable to match your application’s styling, but the exact color is not the responsibility of the component that is being used.

Also notice that the button component in the example above is marked as a variant - the contained variant. While the color property communicates hierarchy, the variant property communicates emphasis. Contained buttons are high-emphasis and are marked by their elevation and fill, while the outlined buttons are medium-emphasis. When no variant is specified, the low-emphasis text button is used.

Components in Practice

Moving past the example of a basic button input component, let’s explore a few of the unique components provided by the Material Design system.

Floating Action Button

The floating action button (FAB) component is not a variant of the button component from earlier, but rather it holds a special place in the overall design. It is intended to only be used once on any screen and communicates the highest priority action on that screen. While the regular button component exists in a hierarchy of user actions, the floating action button is at the top of the hierarchy for the entire screen.

import { Fab } from "@material-ui/core"
import { AddIcon } from "@material-ui/icons"

export default function App() {
  return (
    <div className="App">
      <Fab color="primary" aria-label="add">
        <AddIcon />
      </Fab>
    </div>
  );
}

Note that the AddIcon components are imported from the @material-ui/icons module, which is its own dependency and would need to be installed in addition to @material-ui/core.

npm install @material-ui/icons

Paper

The Paper component, at first glance, is a simple <div/> wrapper with a box shadow. However, as we’ve seen in the other components, there is a higher level concept being applied that makes this component a part of the design system. Like the simple button example, the Paper component utilizes the concept of elevation to communicate emphasis by visually lifting the component up and off of the background.

import { Paper, Typography } from "@material-ui/core"

export default function App() {
    return (
        <div className="App">
            <Paper>
                <Typography variant="h1">How to Use Material-UI in React</Typography>
            </Paper>
        </div>
    );
}

Lab Components

There is an additional category of components that is not yet mentioned, which is the lab components category. Material-UI maintains a package of what they call incubator components (components that are not ready for their core components) that can be installed in addition to the core components. Their use is entirely optional. 

npm install @material-ui/lab

It is important to note that the lab components are experimental. While the core components are updated only four times a year (one major release and three supporting minor releases) and on a predictable schedule, the lab components are updated frequently, potentially with dramatic and breaking changes as the components see real-world use. 

Skeleton placeholder preview

The Skeleton component is an example of a lab component. It is a placeholder preview of the user interface (UI) that will soon be rendered, communicating a loading state without the frustration of a traditional spinner. This convention is used by both Facebook and Google.

Perhaps you have seen this convention used, but maybe didn’t notice it explicitly. For example, Facebook will render a placeholder preview of a post, which resembles the shape of the post that will soon be rendered. Likewise, Google will render a placeholder preview of search results as they are being loaded.

import { Skeleton } from "@material-ui/lab"

export default function App() {
    return (
        <div className="App">
            <Skeleton variant="h1" />
            <Skeleton variant="text" />
        </div>
    );
}

A benefit of the Skeleton placeholder preview being a part of the design system is its ability to infer the width and height of the component that it represents. A Skeleton used with a Typography component will match the height of the header level that will eventually be rendered, without having to explicitly set a height.

import { Typography } from "@material-ui/core"
import { Skeleton } from "@material-ui/lab"

export default function App() {
    return (
        <div className="App">
            <Typography variant="h1">
                {loading ? <Skeleton /> : 'How to Use Material-UI in React'}
            </Typography>
        </div>
    );
}

Leverage the Design System

When you combine React’s component architecture and Material’s design system, as with Material-UI, you have a flexible, expressive starting point for your next website or web application. Remember that the design system is more than a collection of aesthetic choices. The design being implemented involves best practices and seeks to communicate something with every decision. 

In your next project, try Material-UI and leverage the design system. To learn more about what’s coming with the Material design system checkout out the recently announced Material You.

And if you are looking for hosting for your next project or just need a server to test Material-UI, Liquid Web’s VPS Hosting and Cloud Dedicated servers are a great starting point. Contact our sales team today to get your questions answered or to get started.