Intro to Material-UI: Basic Components

Photo by Harpal Singh on Unsplash

Something that I learned pretty early on in my coding career is this: even if your app has amazing functionality, if it doesn’t look good, it will be overshadowed by better-looking apps. First impressions are important, and that carries over to your projects.

If you’re working with React, Material-UI is a powerful styling library. Even if you haven’t worked with Material-UI before, you’ll likely recognize a lot of the icons and components, as Material Design was developed by Google in 2014. After installing the library, you have access to a variety of components that you can import and adjust as you’d like. Right out of the box, the default settings are very clean and cohesive. There does seem to be a bit of a learning curve — it took me a few days of intense work to really get the hang of it — but I think the end result is worth it.

After a brief introduction as to how to import Material-UI into your project, I’ll give an overview of some of the most useful components.

Something that I love about Material-UI is that their documentation and examples are excellent. Right in the docs, you can choose to adjust the primary/secondary and see a sample in real time.

You can also search for specific components and see sample code as well as properties/attributes built into each one. Adding components to your website is as easy as copying/pasting sample code direction into your project.

Before you begin, you’ll need to install two libraries.

First, you’ll need to import the core components.

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

Second (optional), you’ll need to import icons separately if you want access to the material design icons.

// with npm
npm install @material-ui/icons

// with yarn
yarn add @material-ui/icons

BASIC COMPONENTS
Note: You can see a full list of components by clicking on the side menu/drawer and going to “Components.”

APP BAR
The App Bar component is what you’ll need to make your Nav Bar. Below is a basic example available on their website (to see the full code, you’ll need to click on the <> icon). As you can see here, they’ve also imported a Toolbar, and other nested components that we’ll touch on later.

PAPER
The Paper component is an easy way to add a background, outline or shadow to a given area (as shown below with variations of the “elevation” property).

CARD
The card component is like Paper but with more built-in features. The below example uses CardHeader (has default font size/style), CardMedia (images, videos), CardContent (description), CardActions, CardActionArea (when a button is clicked in that area, the whole area will look “clicked”)

TYPOGRAPHY
Material-UI comes with with a built-in theme (which you can override). Below are examples of variations of the variant property.

BUTTON & ICON BUTTON
As shown above, there are default text options for button components. Aside from plain text, you can import material icons to use as buttons as well. Here are a few examples.

GRID
Grid containers and grid items are very useful in creating layouts of your other components. You can choose a direction for your container (row/column), spacing, and default sizes for your grid items depending on the screen size. For more specific layouts, you can nest grid containers within other grid containers. There is a very useful interactive tool on the Material-UI website that allows you to test various properties of a grid container.

I hope this gives you a basic understanding of some of the components available in Material-UI and how to get started on your journey. In addition to experimenting with the Material-UI docs, I recommend perusing this YouTube Series, which goes into each of these components (and others) in depth.