A Crash Course in Material-UI

A Crash Course in Material-UI

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Today, I am going to teach you how to use Material-UI and master it. So let’s get started.

What is Material-UI?

Material-UI is a library that gives beautiful inputs, buttons, dropdowns, accordions, icons, and many more.

How to install Material-UI?

# npm
npm install @material-ui/core @material-ui/icons
# yarn
yarn add @material-ui/icons

What does Material-UI provide you?

  • Inputs

  • Buttons

  • Icons

  • Accordion

  • Modal

Material-UI button

import Button from '@material-ui/core/Button';

First import the button from Material-UI and then use it like this-

You will get a button like this after writing this code -

Plain buttonPlain button

If you click on it, it gives you a nice ripple effect.

If you want to change the background color and change the variant to contained. Add a color prop to the button and you can add primary or secondary like this-

Primary buttonPrimary button

Secondary buttonSecondary button

These two buttons are good but what if you want different colors -

First, create a CSS file and import it as I am using the App.js file it already has an App.css file.

Import the CSS file like this -

import “./Button.css”;

Then you need to give a className to the Button so that we can access it-

Now in the CSS file just add these lines to change the text color and the background color-

In this, we are simply assigning it color and overriding the default styles by using !important.

If you want to customize it more and add some icons check out this.

Material-UI input

import TextField from “@material-ui/core/TextField”;

First, we will import the button then we will use it as follows-

It will give you a nice input like this -

InputInput

Icons

  • Go here and choose any icon you like

  • After you select your Icon click on it and copy the import it would look something like this -

import FavoriteIcon from ‘@material-ui/icons/Favorite’;
  • Then just create a tag of your icon like-
<FavoriteIcon />
  • It will give you an icon like this -

  • If you give it a color of error like this-
<FavoriteIcon *color*=”error” />
  • You will get a beautiful red icon like this -

If you want to have a custom color for it give it a className and set the color to the desired color like this -

<FavoriteIcon *className*=”favouriteicon” />

And add this in the CSS -

.favouriteicon {
color: violet !important;
}

You will get an icon like this -

Accordion

We are going to need a bunch of imports to create an accordion

To create an accordion add this snippet to your code -

This will give you a simple accordion like this

Now let’s build 2 accordions where the other one will close if you click on one of them.

Create a state with the useState hook.

const [expanded, setExpanded] = useState(false);

Add expanded and onChange attributes to the accordion

*expanded*={expanded === "panel1"}

onChange={handleChange("panel1")}

Create a handleChange function

const handleChange = (*panel*) => (*event*, *isExpanded*) => {

setExpanded(isExpanded ? panel : false);

};

Then just duplicate the accordion and change panel 1 to panel 2 and accordion 1 to accordion 2.

The final code will be similar to this

This is how the accordion looks -

Let’s see how we can style the accordion -

Instead of overriding the styles with our own classNames, I am going to target the class that Material-UI gives.

The MuiPaper-root className is for the accordion and MuiIconButton-root for the icons.

We are going to use the Material-UI button to open the modal.

And we will give it a background and a text color

This is the button we get

Now let’s create our modal.

All the imports needed -

We will create a state with the useState hook and two functions for opening and closing our modal.

And then we will create the Modal component like this

This will give us a modal on clicking the button. But it will not look good now.

So let's style our modal.

First, we will add a div inside our modal and give it a className of modal.

Then we will target it and apply some styles in our CSS files.

Our modal now looks beautiful.

Congratulations! You have completed the Material-UI crash course.

I have created a repository and in the components folder, you can see all the components that have been discussed.

Let me know what you want to see next 😉.

Useful links -

Github repository

All socials

Material UI

More content at **plainenglish.io**

Interested in reading more such articles from Avneesh Agarwal?

Support the author by donating an amount of your choice.

Recent sponsors
 
Share this