How to use Material UI with React


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


Install Material UI (from

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

yarn add -D @types/material-ui 

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

<link rel="stylesheet" href=",400,500,700&display=swap" />
<link rel="stylesheet" href="" />

Update the example app

Open src/numbers.tsx and paste:

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' }}>
        Number is {value}

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