Brief Introduction to Material UI

Posted By : Pranav Kakkar | 25-Sep-2017

Introduction:

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

injectTapEventPlugin();

Use:

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.