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:
- Layout
- Inputs
- Navigation
- Surfaces
- Feedback
- Data display
- 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.
Related Articles:
About the Author: Kyle Johnson
Senior Developer @GiveWP (@LiquidWeb), formerly @NinjaForms. Afternoons are spent with my wife wrangling JSON, a black lab.
Our Sales and Support teams are available 24 hours by phone or e-mail to assist.
Latest Articles
What Is WebP and What Makes it Different from Other Image Formats?
Read ArticleTop 10 Password Security Standards
Read ArticleTop 10 Password Security Standards
Read ArticleHow to Install MongoDB on AlmaLinux
Read ArticleHow to Use the WP Toolkit to Secure and Update WordPress
Read Article