A UI component library was developed by Google based on the material design guidelines of Google. It consists of many accessible and configurable UI widgets and the components are self-supporting and only inject the styles they need to display. Supported by a strong community, it is one of the most popular component libraries. The main draws are the user-friendly layout and design features that borrow from Google's experience with UI layouts. Below is a brief introduction on how to install and use it for React.
Installation
Run in your react app:
npm install @material-ui/core
Then update the index.html file by adding a Google Roboto font because material UI was designed with the Roboto font in mind.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
How to Use
Below are some examples utilizing Material UI components. Can also run development server npm start to see how it looks.
In App.js you can import the component from the ‘@material-ui/core/AppBar’, and pass color and position props.
import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';
class App extends Component {
render() {
return (
<div>
<AppBar color="primary" position="static">
<h1>My header</h1>
</AppBar>
</div>
);
}
}
export default App;
You can then import Typgoraphy and Toolbar to make the spacing nicer for the header.
import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar'
import TypoGraphy from '@material-ui/core/Typography'
class App extends Component {
render() {
return (
<div>
<AppBar color="primary" position="static">
<Toolbar>
<TypoGraphy variant="title"
color="inherit"
>
My header
</TypoGraphy>
</Toolbar>
</AppBar>
</div>
);
}
}
export default App;
Make a navbar.js and import ListItem and ListItemText. Each ListItem component has a component prop value to nav so that it can get html nav elements.
import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import TypoGraphy from '@material-ui/core/Typography'
function NavBar(props) {
return (
<List component="nav">
<ListItem component="div">
<ListItemText inset>
<TypoGraphy color="inherit" variant="title">
Home
</TypoGraphy>
</ListItemText>
<ListItemText inset>
<TypoGraphy color="inherit" variant="title">
Posts
</TypoGraphy>
</ListItemText>
<ListItemText inset>
<TypoGraphy color="inherit" variant="title">
Contact
</TypoGraphy>
</ListItemText>
</ListItem >
</List>
)
}
export default NavBar;
Material UI also has SVG icons for use in the components. Install with: npm install @material-ui/icons
In navbar.jsL:
import React from 'react';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import TypoGraphy from '@material-ui/core/Typography'
import ListItemIcon from '@material-ui/core/ListItemIcon'
import { Home, Book, AccountBox } from '@material-ui/icons'
function NavBar(props) {
return (
<List component="nav">
<ListItem component="div" >
<ListItemText inset>
<TypoGraphy color="inherit" variant="title">
Home <Home />
</TypoGraphy>
</ListItemText>
<ListItemText inset>
<TypoGraphy color="inherit" variant="title">
Posts <Book />
</TypoGraphy>
</ListItemText>
<ListItemText inset>
<TypoGraphy color="inherit" variant="title">
Contact <AccountBox />
</TypoGraphy>
</ListItemText>
</ListItem >
</List>
)
}
export default NavBar;
This is just a glimpse of the Material UI and what you can do with it. You can make grid layouts, form control, and inputs, etc. Check out more on the official site.
References
Top comments (0)