Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

react

What is Material UI in React?

Shahpar Khan

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

svg viewer

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.

Code

Here is a sample code for generating a navigation bar using material UI:

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')
);

RELATED TAGS

react

CONTRIBUTOR

Shahpar Khan
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring