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.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Pranav Kakkar
Pranav is a sharp intellectual UI Developer, he has a good Knowledge of HTML, CSS. His hobbies are Playing Cricket, Football, listening Music.