Material-UI Basics React

Photo by Mitchell Luo on Unsplash

Tired of spending too much time on css trying to get that perfect button configuration? Icons? Modals? This is where a framework like Material-UI comes in handy, and the power of React really shines. Libraries like this and React are like peanut butter and jelly.

To get started.

npm install @material-ui/core

Now lets say you want a button to show on a specific component.

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

the all you have to do is

<Button>Im a Button</Button>

Boom! done! Now all you need is an onClick to add functionality.

What’s that? You need an Icon?

npm install @material-ui/icons

Then head on over to https://material-ui.com/components/material-icons/ and pick one out. When you click on the icon you want a pop-up will appear showing you exactly what you need to import in order to use this icon.

import DoneIcon from '@material-ui/icons/Done';

Now you can use DoneIcon anywhere on your page. Easy right.

I’ve found that when I start a project I can look into Material-UI to see if they offer anything I can use. If they do you might be able to save yourself a lot of time in the future.