Everything React Developers need to know about Material-UI

The reasons why Material-UI is a must know for react developers

8 min readMar 25, 2021

Would you walk across the Alps or take a plane to go to Switzerland? Now, if you are like me, you would at least begin your journey the harder way until the sudden realisation of its uselessness slaps you in the face and then you will change your course. My problem was that I did not know how useful the Material-UI library was. I never researched on it or any other design libraries and I jumped into react with my mediocre level knowledge hoping to accomplish success on an e-commerce project with a tight deadline and a small budget. It is only after I started learning Material-UI, I came to realise how difficult my life was without it. My naive entry into the world of front end development made my project so much more difficult than it had to be. I was having a huge scaling issue which meant that every time my app was opened on a screen of a different size the website’s design will get completely messed up. I downloaded social media icons from google images like a crazy person oblivious of the many kinds of easier options that are available. I faced a lot of trouble without using Material-UI. This is the reason why I think everyone should learn Material-UI before starting a project with React JS.

What is material-UI?

Material-UI is simply a User Interface library that allows you to reuse components which was designed using Material Design. Material Design is a design language that was created by Google in 2014. Material Design uses Grid-based layouts, responsive animations and transitions, padding and depth effects such as lighting and shadows. Without further ado, let’s get started on some of the most important features of Material- UI that are a must learn for all react developers.

Grid

The most important Material-UI component is the Grid component. At first we need to install Material-UI like any other dependency or package.

npm install --save @material-ui/core

Then Grid must be imported.

import {Grid} from '@material-ui/core';

The Grid layout can look really complex if you have never worked with one before. This is why I have laid out some examples for you. The first thing you must remember is that the Grid layout is split into 12 different columns. It means that it splits your screen into 12 equally sized quadrants. Suppose, the area on the picture is what the user can see on the website. Notice how grid divides the website into 12 columns. The Grid container works very similar to flex boxes. Each row has 12 columns to fill.

There are two basic components of Grid one is known as the container and one is known as the item. Each Grid item has to be within a Grid container.

This is an App.js folder in React with both the Grid container and the Grid item. This was created in order to re-create the container in Picture 1.

import './App.css';import {Grid, Paper} from '@material-ui/core'function App() {return (<div className="App"><Grid item container><Grid item xs={12}><Paper className='papers'>xs=12</Paper></Grid><Grid className='papers' item xs={6}><Paper >xs=12</Paper></Grid><Grid className='papers' item xs={6}><Paper >xs=12</Paper></Grid><Grid className='papers' item xs={3}><Paper >xs=3</Paper></Grid><Grid className='papers' item xs={3}><Paper >xs=3</Paper></Grid><Grid className='papers' item xs={3}><Paper >xs=3</Paper></Grid><Grid className='papers' item xs={3}><Paper >xs=3</Paper></Grid></Grid></div>);}
export default App;

So let’s talk about picture 1. The entire box is the Grid container and this container is split up in rows and each row has 12 columns. An item can be sized anywhere from 0 to 12 columns. In the first row, xs={12} means that the item has taken all 12 columns that are available for extra small screen. If we look at the next row of the container you will see that we have two items here. The first item takes up 6 out of the 12 and the second also takes up 6. Thus each item share the row equally. From the code above, you can get an idea of how the two items share the row equally by each taking up 6 columns. Same applies for the third row where the items share up the row equally each taking only 3 columns of the row. Hence 4 items can fit in one row. What of the last item took 4 columns. Instead of it being <Grid item xs={3}>xs=3</Grid>, what if it was

<Grid className='papers' item xs={4}><Paper >xs=3</Paper></Grid>

Then the entire item would move to the next row. But what does xs even mean? Xs stands for extra small. Xs is a break point created by Material-UI. Material-UI has a couple of custom breakpoints. They are labelled xs, sm, md, lg, xl. The values of these sizes are pretty straight-forward.

xs:0
sm:600
md:960
lg:1280
xl:1920

These values are in pixels and xs screen is from 0 pixels wide to 600 pixels wide, sm from 600 to 960 wide, md from 1280 to 960 and xl from 1920 to 1280. Check out these codes:

<Grid container spacing={3}>
<Grid item xs={12} sm={6}><Paper className={classes.paper} >x=12</Paper>
</Grid>
</Grid>

The code simply means that when the width of the screen is extra small that is between 0 to 600 pixels, the grid item will take the entire width of the screen i.e. all 12 columns. If the width of the screen is greater than 600 pixels, the Grid item will take half of the screen i.e. 6 columns. Now if we use all of the breakpoints, we get:

<Grid container spacing={3}>
<Grid item xs={12} sm={6} lg={4}><Paper className={classes.paper} >x=12</Paper>
</Grid>
</Grid>

This means from sm to lg it will be 6 and then if the screen is greater than lg it will be 4 which means that each Grid item will take 4 columns from the 12 columns of the row of the container. The spacing in the container provides a space between the Grid items.

Paper

What about the Paper component of material-ui from the code? What purpose is the Paper component serving?

import React from 'react';
import {Paper, Typography} from '@material-ui/core';export default function App(){
return(
<Paper>
<Typography variant="h6">This is my typography
</Typography></Paper>
);
}

I thought Paper must be something extravagant but it’s actually not. Paper isnt really anything but just background. And if I put anything inside of it, all paper does is it wraps itself around the thing. Like this:

Paper comes with really cool attributes such as elevation:

import React from 'react';import {Paper, Typography} from '@material-ui/core';export default function App(){return(<Paper elevation="24"><Typography variant="h6">This is my typography</Typography></Paper>);
}

The result being that the Paper component gets elevated from the page as much as we refer to in the elevation attribute.

With the help of built in CSS of Material-UI, we can change the background colour, the entire look and feel of the Paper component. We can even overwrite all the CSS classes. But for the sake of simplicity we will only talk about the basics here.

Typography

Typography is one of the most basic components we can use. Typography just like the documentation says comes with the different standards and types of texts. Let’s look at some of the props that comes with Typography.

import React from 'react';import Typography from '@material-ui/core/Typography';export default function App(){return(<Typographyalign="right"color="secondary"gutterBottom>HelloWorld</Typography>)}

As you can see from the codes that the props or attributes that comes with the Typography component are pretty self explanatory. The align =”right” just makes all the words shift to the right. The color which is secondary is a built in CSS prop that comes with Material-UI. When it comes to Material-UI we are provided with a default theme . Secondary is the main color of secondary component of the default theme. The gutterBottom is set to false by default but just by putting it as an attribute, it is set to true. Its functionality is to add some margins at the bottom. There are many other props but we can overwrite it with our own custom made theme.

For example, we can totally customise our gutterBottom, by default gutterBottom has a marginBottom of 0.35 em. We can customise it and make it any number of our choice.

import React from 'react';import Typography from '@material-ui/core/Typography';import { makeStyles } from '@material-ui/core';
const useStyles=makeStyles({gutterBottom:{marginBottom:'0.6em'}});export default function App(){const classes = useStyles();return(<TypographyclassName={classes.typographyStyle}>HelloWorld</Typography>)}

This will provide more space between lines inside the Typography element. We can also change colours, for example:

import React from 'react';import Typography from '@material-ui/core/Typography';import { makeStyles } from '@material-ui/core';const useStyles=makeStyles({gutterBottom:{marginBottom:'0.6em'},typographyStyle:{color:'blue'}});export default function App(){const classes = useStyles();return(<TypographyclassName={classes.typographyStyle}gutterBottom>HelloWorld</Typography>)}

This changes the colour of the text from the default colour to blue by overwriting it.

Changing the color of the text by overwriting it

makeStyles

So how do we exactly overwrite the built in style props and their attributes? We can achieve this by using the makeStyles hook. Let’s go over some of the most basic and important features of makeStyles.

Suppose, we need to make a button. A simple button on the screen with the default Material-UI style would look like this :

Now, let’s change the default features with the following codes:

import React from 'react';import Button from '@material-ui/core/Button';import { makeStyles } from '@material-ui/core';const useStyles=makeStyles({buttonStyle:{backgroundColor:'blue',color:'white'}});export default function App(){const classes = useStyles();return(<Button className={classes.buttonStyle}>Small buttons</Button>)}

Now we get something that looks like this:

The default style has been overwritten by Material-UI

If you observe the codes, we had to import something called a makeStyles prop from material-ui core. Then we inserted our Button a className buttonStyle within our makeStyles function. In our actual component itself we use classes= useStyles() which is a function that we actually get back from makeStyles. With makeStyles, we can completely transform the button, make it user friendly, provide animations etc. The world is in the palm of our hands.

In this article, I have only discussed the basics. Material-UI is responsible for many beautiful websites and apps that we all use today. With a thorough knowledge of Material-UI a React developer can reach great heights and move mountains.

Code and Create

Samanja