• Brief Introduction to Material UI

    Posted by Pranav Kakkar | Last Updated: 26-Sep-17


    Material-UI is a set of React components that implement Google's Material Design specification.
    Material-UI components work in the isolation. These the are self-supporting, they will be injected and only inject the styles they need to display to the frontend. 

    How to Install:

    Stable Version:

    npm install material-ui
    Pre-release channel:
    npm install material-ui@next
    To inject this plugin at the start of our app:
    import injectTapEventPlugin from 'react-tap-event-plugin';


    Using material-UI components is very straightforward. Once material-up is included in our project, we can use the components this way:


    import React from 'react'
    import RaisedButton from 'material-ui/lib/raised-button';
    const MyAwesomeReactComponent = () => (
    export default MyAwesomeReactComponent;

    Here I used:

    import RaisedButton from 'material-ui/lib/raised-button';
    instead of
    import {RaisedButton} from 'material-ui';

    This makes my build process faster and the build output smaller.


    Then there comes the Customization Part:

    We can customize the Themes, Inline Styles, Colors

    For the convenience of the Developer, there is already 2 themes included Light Theme and the Dark Theme.
    By Default, the Light Theme is Loaded but we can change it to already included Dark Theme using the below snippet:


    import React from 'react';
    import darkBaseTheme from 'material-ui/lib/styles/baseThemes/darkBaseTheme';
    import MuiThemeProvider from 'material-ui/lib/MuiThemeProvider';
    import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
    import AppBar from 'material-ui/lib/app-bar';
    const darkMuiTheme = getMuiTheme(darkBaseTheme);
    class Main extends React.Component {
      render() {
        return (
    export default Main;

    There are many components which we can use for making our web application more interactive.

Tags: UI

Mobile Applications

Video Content

Bigdata & NoSQL

SaaS Applications



Alexa Certified Site Stats for