Material UI Intro
Tags: react, materialui
Published: 2020-10-21 01:35:56

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 <AppBar> 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**

- https://material-ui.com/getting-started/installation/
- https://reactgo.com/material-ui-react-tutorial/
- https://www.npmjs.com/package/@material-ui/core