Introduction to Material-UI

Material-UI logo

You’ve (maybe) done your research about different CSS libraries and stumbled across Google’s open-source project, Material-UI. As a TLDR, Material-UI is a library that allows you to reuse Google’s Material Design components. Material Design is essentially a front-end developer’s go-to for best design practices.

If you’re familiar with Bootstrap, you’ll find navigating Material-UI (MUI) to be very similar. It is one of the top user interface libraries for React out there. Why? It’s incredible:

  • It comes responsive out of the box.
  • You can create a theme to apply global styles to your components.
  • In the process of learning how to use MUI, it will help you create intentional designs while teaching you about hierarchy and meaning.

Brief Overview

In this series, we’ll go over these components:

  • Grid
  • Hidden
  • Card
  • Typography
  • Snackbar (and Redux)
  • Icons

Along with those components, we’ll learn about how to pass props or attributes to each of these components such as breakpoints, spacing, flexbox rules, and more! If you don’t see a topic or component you’d like to cover, please leave a comment to let me know!

Setting up Your Environment

I will be using CodeSandbox.io throughout this series so I can easily share my code with you. You’re welcome to fork these projects and customize them on your own! We will be using MUI’s core and icon library.

Setting up CodeSandbox

Once you’ve registered or signed in to CodeSandbox.io, you’ll navigate to Create Sandbox in the top right hand corner.

Create Sandbox on CodeSandbox.io

Next, we’ll select a React template for a faster set up. You can filter through the templates or just select the React template shown under Official Templates:

Create Sandbox Menu

Next, we’ll add MUI to our new React app by navigating to the Dependencies menu on the left hand side:

Dependencies Menu

In the text field, we’ll add these two dependencies individually:

@material-ui/core
@material-ui/icons

Your dependencies should now look like this:

New Dependencies List

Setting up Locally

If you would like to install Material-UI’s core library and icon library in your React app, simply run:

npm i --save @material-ui-core || npm install @material-ui/core
npm i --save @material-ui-icons || npm install @material-ui/icons

Please note that you must have the core library installed in order to access the library. Like any other file or library, we’ll import the necessary components at the top of each file. For example:

Importing a Component from MUI Core

Now that we have our local environment set up, we’ll dive into MUI’s Grid layout next week and create elements to display an understanding of the rows and columns.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tiffany Kanjanabout

Tiffany Kanjanabout

Full stack web developer. Frontend and design enthusiast. Avid rock climber and amateur photographer.