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:
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.
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 <AppBartitle={menu}style={{background: '#1AB394'}}iconClassNameRight="muidocs-icon-navigation-expand-more"/>}})ReactDOM.render(<Test />,document.getElementById('container'));
Free Resources