Material UI is the React component library that implement Google's Material Design. It contains lots of different components, such as buttons, lists, tables, and cards, which you can use to get a nice and uniform user interface. We will continue with the shopping list app and start to style the user interface with Material UI:

1. Open the shopping list app with VS Code. Install Material UI by typing the following command in the root folder to PowerShell or any suitable terminal you are using:

npm install @material-ui/core --save

OR with yarn

yarn add @material-ui/core

2. We are ready to start to using the Material UI components. We will first change the buttons in the AddItem.js file to use the Material UI Button component. We have to import the Button component and then use it in the render() method. Different props of Button can be found in the Material UI documentation:

// Import RaisedButton
import RaisedButton from '@material-ui/core/Button';

// Use RaisedButton in render() method
render() {
  return (
    <div>
      <section>
        <Button onClick={() => this.addform.show()} 
         variant="raised" color="primary">
         Add Item</ Button>
      </section>
      <SkyLight 
        hideOnOverlayClicked 
        ref={ref => this.addform = ref} 
        title="Add item">
        <input type="text" name="product" 
         onChange={this.handleChange} 
         placeholder="product" /><br/>
        <input type="text" name="amount" 
         onChange={this.handleChange} 
         placeholder="amount" /><br/>
        <Button onClick={this.addItem} 
         variant="default"  >Add</ Button>
      </SkyLight> 
    </div>
  );
}

Now the app is using RaisedButton and it looks like this:

3. Change the input fields in AddItem.js to use the Material UI TextField component. The steps are the same as with the buttons. Import the TextField component and then use it in the render() method:

// Import TextField component
import TextField from '@material-ui/core/TextField';

// Use TextField in render() method
render() {
  return (
    <div>
      <section>
        <Button onClick={() => this.addform.show()} 
         variant="raised" color="primary">
         Add Item</ Button>
      </section>
      <SkyLight 
        hideOnOverlayClicked 
        ref={ref => this.addform = ref} 
        title="Add item">
        <TextField type="text" name="product" 
          onChange={this.handleChange} 
          placeholder="product" /><br/>
        <TextField type="text" name="amount" 
          onChange={this.handleChange} 
          placeholder="amount" /><br/>
        <Button onClick={this.addItem} 
         variant="default"  >Add</ Button>     
      </SkyLight> 
    </div>
  );
}

After the changes, your form should look like the following:

4. Change our list in the App.js file to use the Material UI List and ListItem components. Import the components and use ListItem in the map function where listItems are created and render List instead of ul. We will show the amount of the product in the secondary text of the ListItemText component:

// Import List, ListItem and ListItemText components
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';

// Use List and ListItem in render() method
render() {
 // Use ListItem component here instead of li 
    const listItems = this.state.items.map((item, index) => 
     <ListItem key={index}>
     <ListItemText primary={item.product} secondary={item.amount} />
     </ListItem>)
  return (
    <div className="App">
      <h2>Shopping list</h2>
      <AddItem additem={this.addItem}/>
      <List>{listItems}</List>
    </div>
  );
}

Now the user interface looks like the following. With a small amount of work, the user interface is now much more polished: