With over 60,000 GitHub stars, Material-UI is one of the most popular React UI libraries. It has components, styles, themes, icons, and so much more and can be used as a single resource for all your styling needs.
In this guide, we will discuss how to install Material-UI, import components, and use them inside your React app.
To install Material-UI, run the following command in your React project's root directory.
1npm install @material-ui/core
Or if you prefer yarn
, run the following command.
1yarn add @material-ui/core
Material-UI works best with Roboto font, but it is not automatically loaded by Material-UI, so you will have to add it yourself. There are many ways to do this. One of the easier ways is by using Google Web Fonts.
Add the following code to the <head>
tag of your public/index.html
file.
1<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
With Material-UI, you can use both font icons and SVG icons. To use font icons, add the following code to the <head>
tag of your public/index.html
file.
1<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
To use SVG icons, run the following command, and install @material-ui/icons
as a dependency.
1npm install @material-ui/icons
In this section, we will discuss how to use Material-UI in your app. We will style a <Button>
component using various props.
The first thing to do in order to use any Material-UI component is to import that component. In your App.js
, add the following code at the top with other imports.
1import React from "react";
2import { Button } from '@material-ui/core';
Or you can import by pulling specific components from the library.
1import Button from '@material-ui/core/Button';
Now use this component inside the App()
function, then pass primary
in color
prop and contained
in variant
prop.
1export default function App() {
2 return (
3 <div>
4 <Button color="primary" variant="contained">
5 Click Me
6 </Button>
7 </div>
8 );
9}
Here is how this button will look.
You can change the size by passing the size
prop to the Button
component. This size
prop can take small
, medium
, and large
as its value.
1<Button size="large" color="primary" variant="contained">
2 Click Me
3</Button>
Here is how this button will look.
You can also add icons to this button using startIcon
and endIcon
props; as the name suggests, startIcon
adds icon before the text of the button and endIcon
adds it after the text.
But first, you need to import the icons into your App.js
. In this example, you will create login and logout buttons.
You can search for your desired icons here.
Import AccountCircle
icon from @material-ui/icons
.
1import LoginIcon from '@material-ui/icons/AccountCircle';
Now, pass this LoginIcon
to the startIcon
prop of the Button
component.
1<Button startIcon={<LoginIcon />} color="primary" variant="contained">
2 Login
3</Button>
Here is how this button will look.
You can also pass this icon to the endIcon
prop.
1<Button endIcon={<LoginIcon />} color="primary" variant="contained">
2 Login
3</Button>;
Here is how this button will look.
Now for the logout button. Import the ExitToApp
icon from @material-ui/icons
.
1import LogoutIcon from '@material-ui/icons/ExitToApp';
For the logout button, pass secondary
to the color
prop, which will make the button red; that makes sense since it is a logout button.
1<Button startIcon={<LogoutIcon />} color="secondary" variant="contained">
2 Logout
3</Button>
Here is how this button will look.
You can further group these buttons using the ButtonGroup
component. First, import the ButtonGroup
component to App.js
.
1import ButtonGroup from "@material-ui/core/ButtonGroup";
Using ButtonGroup
, remove repetitive props from the buttons and pass them to ButtonGroup
instead.
For example, here varaint="contained"
is common to both the buttons, so you can pass it to ButtonGroup
instead and remove it from individual buttons.
1<ButtonGroup variant="contained">
2 <Button endIcon={<LoginIcon />} color="primary">
3 Login
4 </Button>
5 <Button startIcon={<LogoutIcon />} color="secondary">
6 Logout
7 </Button>
8</ButtonGroup>
Here is how this will look.
You can also change the buttons' orientation by passing the orientation
prop to the ButtonGroup
component.
1<ButtonGroup variant="contained" orientation="vertical">
2...
3</ButtonGroup>
Here is how this will look.
You can explore all the examples discussed above here.
There are many props besides the one discussed here available for every component. You can read more about them in the official docs.
In this guide, we discussed how to install and use Material UI in any React app. We also saw how to add icons and style components.
Try to explore different components, themes, icons, and styles available in Material UI. Here are some additional resources that can be helpful.
Happy coding!