How to use Material UI with React

Prerequisites

An existing React app - you can start with the example app created here or you can copy the template from github

Setup

Install Material UI (from https://material-ui.com/getting-started/installation/):

sh
yarn add @material-ui/core @material-ui/icons

yarn add -D @types/material-ui 

Open index.html and add these lines in the section:

html
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Update the example app

Open src/numbers.tsx and paste:

js
import Button from '@material-ui/core/Button';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import React, { useState } from 'react';

interface INumberProps {
  initValue: number
}

const Numbers = (props: INumberProps) => {
  const [value, setValue] = useState(props.initValue)

  const onIncrement = () => {
    setValue(value + 1)
  }

  const onDecrement = () => {
    setValue(value - 1)
  }

  return (
    <Card style={{ width: '400px' }}>
      <CardContent>
        Number is {value}
      </CardContent>

      <CardActions>
        <Button variant="contained" color="primary" onClick={onIncrement}>+</Button>
        <Button variant="contained" color="primary" onClick={onDecrement}>-</Button>
      </CardActions>
    </Card>
  )
}
export default Numbers