2021年6月15日 星期二

[react, material-ui, button] How to use material-ui button in React app

How to use material-ui button in React app

井民全, Jing, mqjing@gmail.com


Do you want your WebApp looks like this,

Fig. A HTML button.

or this.

Fig. A Material-ui button.

Take 2 minutes, I will show you how to do it.


Enjoy!
by Jing.

Setup skeleton

npx create-react-app my-app --template typescript

cd my-app

Install Material-UI

yarn add @material-ui/core

Usage

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


<Button onClick={onClickHandler} variant="contained" color="primary">

        {state}

</Button>



Code

File: src/App.tsx

import React,  { useState } from 'react';

import logo from './logo.svg';

import './App.css';

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


function App() {

  const [state, setState] = useState('Click');


  const onClickHandler = () => {

    setState('loading');

    setTimeout(() => {

        setState('success');

    }, 2000);

}


  return (

    <div className="App">

      <header className="App-header">

        <p>

        {/* <button onClick={onClickHandler}> {state} </button> */}

        <Button onClick={onClickHandler} variant="contained" color="primary">

        {state}

        </Button>

        </p>

      </header>

    </div>

  );

}


export default App;



Test

yarn build

yarn start

Fig. The yarn start result.

Reference

  1. https://material-ui.com/components/buttons/


at