Material UI in React #1 — Installation

Hey people!

I’ve been working with Material UI for over a year now and I find this library very useful. During that time I learned how to use this library correctly and avoid the pitfalls that may be waiting when building an application using styled components.

Who is this tutorial for?

I am creating these series primarily for people starting out with React and / or MUI, but the following episodes will cover the more complex aspects of MUI, so anyone can learn from it.

At the end of the series you will end up with a simple dashboard that includes MUI Core and MUI X components.

If you prefer, there’s a video version of the tutorial:

https://www.youtube.com/watch?v=h9KevTtI5O0&ab_channel=TheAtypicalDeveloper

Let’s get started — What is Material UI?

It is a User Interface library that comes in with lots of various components that will speed up your work as a developer. This library will help you to maintain the consistency of UI in your application. The example of MUI styled components can be just found below:

Material UI is being used by the biggest companies in the world like Spotify or Netflix. At this moment they offer 4 types of products, although I am not going to write about it, if you’re interested you will find all the details on the homepage: https://mui.com/

Installation — starting fresh

If you’re going to start fresh with a brand new project then you would have to open a terminal in the file directory where you hold your repositories (usually /Documents) and open up a terminal, type in:

npx create-react-app materialui

To find out more about create-react-app — https://reactjs.org/docs/create-a-new-react-app.html

Once all your node-modules are downloaded then just open up the repo in Visual Studio code (or IDE of your choice). Our react boilerplate is ready, now we have to add MUI library to our project. To do that, make sure you’re within your project’s path and type in:

npm install @mui/material @emotion/react @emotion/styled

or (if you use yarn)

yarn add @mui/material @emotion/react @emotion/styled

This package will include most of the fundamential parts of MUI library, although some of the components (like icons) will require an extra package, I will mention it once we start using Icons later in the series.

MUI uses Roboto font, which is not included in the package. You are responsible for loading any fonts used in your application. You can either load Roboto font via CDN:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>

or just install it with the npm

npm install @fontsource/roboto

and then it can be imported via

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

Get rid of unwanted files

For that tutorial I would like to keep it as simple as possible and I would just delete things that we won’t need. Delete:

App.test.js
App.css
logo.svg

Once deleted, your file tree should look like this:

Your App.js component holds some unwanted code too, you can clean it up, so it looks like this:

Save the code, refresh the browser.

Adding first MUI component

This will be fairly easy and we will to import the Button component and render it in the App.js file. Copy the line of code attached below and paste it on the very first line within App.js

import Button from '@mui/material/Button';

Then to render it, just add the component to return, so it sits inside of the main div element, just like this:

You will quickly notice that Button’s style is slightly different from the one that’s available on MUI website. This is because we haven’t specified the variant of it.

The basic button comes in with three variants text (default), contained and outlined.

To change the variant just add it in as a prop, so your Button component should look like this now:

<Button variant="outlined">Button</Button>

You can play around with the Button API’s and customize it’s color, size and much more. Now you can play around a bit and see what you can achieve when changing Button’s API. Just go to that page to find out more: https://mui.com/api/button/

Summary

You have installed MUI library and added your first component, well done you! In the next article we will start building the dashboard and that will include setting up the grid and creating left sidebar (of course using MUI).

At the end of the series we will have fully working dashboard that will look like this: