What is Material UI in React?

What is Material UI?

Material UI is an open-source, front-end framework for React components that has 60,500 plus stars on github. It is built using Less. Less (stands for Leaner Style Sheets), is a backward-compatible language extension for CSS. Material UI is based on Google’s Material Design to provide a high-quality, digital experience while developing front-end graphics. Material Design focuses on providing bold and crisp designs – it builds textures by focusing on how the components cast shadows and reflect light.

There are a few key advantages of designing with Material UI:

Some frontend frameworks are not very well documented, this makes it hard to develop with them. However, Material UI has detailed documentation that makes it easy to navigate through the framework.
Material UI stays recent with regular updates. At the time this article was written, the most recent update was v4.11.0 (dated July 1, 2020).
The components throughout are consistent in design and color tones, which allows the developed application/webpage to look aesthetically appealing.

Getting started

First, create a new React app with the create-react-app command and give it a name:

npx create-react-app my_app

Then, download and install Material UI. It is recommended that you download and install using yarn as it simplifies the process to just one line:

yarn add @material-ui/core

Before you start developing with Material UI, do not forget to change the font to Roboto. Material UI’s components are styled according to Roboto, so it’s best to use that font. Then, navigate to index.html and add the following line:

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

Now, you are all set to start to developing in Material UI!

If you are looking for examples, click here here to see a GitHub repository containing how to incorporate Material UI in your application.

import React from 'react';
import ReactDOM from 'react-dom';
import {
   AppBar
} from 'material-ui';
const Test = React.createClass({
   render() {
      const menu = <div className="container">
               <span><a href="#">Dashboard</a></span>
               <span><a href="#">My Device</a></span>
               <span><a href="#">Follow</a></span>
               </div>
      return <AppBar
    title={menu}
                style={{background: '#1AB394'}}
    iconClassNameRight="muidocs-icon-navigation-expand-more"
  />
   }
})
ReactDOM.render(
   <Test />,
   document.getElementById('container')
);

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments

What is Material UI in React?

What is Material UI?

Getting started

Code