Mastering Material UI

This is the first part of a mini series where I'll be covering some common frontend styling libraries, starting with Material UI. Material UI (MUI) is a React component library that implements Google's Material Design. When opening up the MUI docs, it can be a little intimidating because of just how many components there are. This blog will be running through a fair chunk of MUI components with the goal of learning what they do, and how they can help with frontend productivity.

To start, I'll be using MUI's Album Template for demo purposes, as I feel that it uses some of the more common components that you'll likely be using. Please note that this repo is older, so some of the components in it are deprecated.

Installation

MUI is pretty much plug and play. It does have two peer dependencies, react and react-dom, so ensure that these are installed first. After those are installed, if using npm, run this command: npm install @mui/material @emotion/react @emotion/styled. This will install the latest version of MUI, at the time of writing, I used v6.1.0 with React v18.3.1. If you want to use MUI's icon library, you can use this command: npm install @mui/icons-material. Be sure to checkout MUI Icons library. Any components you want to use can be imported directly into the file where you want to use it. The import format is import { Component } from '@mui/material/Component';

Template

After making a few changes to the default repo this is what the album template looks like. Let's start picking apart some of the components used.

MUI Components

CssBaseline

We'll start with CssBaseline, this component can be boiled down to a collection of HTML element and attribute style normalizations based on normalize.js. This basically ensures that all of your elements will look the same across browsers.

AppBar/ToolBar

The AppBar and ToolBar work in tandem to build a functional navigation bar right out the box. The ToolBar acts as a layout helper within the AppBar component.

<AppBar position="relative">
  <Toolbar>
    <CameraIcon />
    <Typography variant="h6" color="inherit">
      Album layout
    </Typography>
  </Toolbar>
</AppBar>

AppBar has a position prop that we can use to determine how the nav bar reacts when scrolling on a page. This example is really simple but you could position buttons, dropdown menus, and more within these components.

Container

The container component is what will hold your other components for a page. They have a maxWidth prop that allows the container to grow with the size of the screen.

Grid2

Grid2 is MUI's version 2 of the Grid component. It's used for creating flexible layouts within containers. It follows the CSS Flexbox model and uses the 12 column grid system. The grid work in a two part system, where one grid acts as the container and the child one acts as the item.

<Grid2 container spacing={2} justifyContent="center">
  <Grid2 item>
    <Button variant="contained" color="primary">
      Main call to action
    </Button>
  </Grid2>
  <Grid2 item>
    <Button variant="outlined" color="primary">
      Secondary action
    </Button>
  </Grid2>
</Grid2>

Button

We'll also use this example to talk about the Button component as well. Every app needs buttons right? MUI comes with pre-built button components that are styled out the box. They have a variant prop to define the button's style. You have three variants to choose from: text, contained, and outlined. Not to mention you get access to the color prop which has a few pre-made ones like primary, secondary, success, and error.

Typography

The typography component is your building block for any text you may use in your app. This means titles, paragraphs, labels, etc. This component ensures that text follows best practices for accessibility and consistency.

Features

• Scales font sizes based on screen size.
• Variant prop for changing text to heading, body, and more Let's look at the header and paragraph under it for an example

<Typography
  variant="h2"
  align="center"
  color="textPrimary"
  gutterBottom
>
  Album layout
</Typography>
<Typography
  variant="h5"
  align="center"
  color="textSecondary"
  gutterBottom
>
  Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.
</Typography>

Here we can see some of the different props coming into play: variant changing the text types, align tells the text where to align, color sets the color of the text, and gutterBottom sets a small margin under the text. In the second typography, we can also see that by default, longer strings of text auto-wrap where they are aligned.

Card

Finally let's go over cards. Cards are another container for displaying organized content. It is highly customizable and has subcomponents like CardHeader, CardMedia, CardContent, and CardActions.

<Card>

  <CardContent>

    <Typography gutterBottom variant="h5">

      Heading

    </Typography>

    <Typography>

      This is a media card. You can use this section to describe the content.

    </Typography>

  </CardContent>

  <CardActions>

    <Button size="small" color="primary">

      View

    </Button>

    <Button size="small" color="primary">

      Edit

    </Button>

  </CardActions>

</Card>

Conclusions

Material UI is an extensive library. It can take some time to get used to, but it's very powerful. By integrating MUI into a project, developers can speed up their workflow while maintaining a high standard of design and functionality.

Sources

Material UI Docs
Album Template