Blog

  • Brief Introduction to Material UI

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

    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.

Tags: UI

Mobile Applications

Video Content

Bigdata & NoSQL

SaaS Applications

Miscellaneous

Archives


Alexa Certified Site Stats for www.oodlestechnologies.com