material-ui react js code example

Example 1: material ui react

// Get the core
npm install @material-ui/core

// Those fancy SVG icons
npm install @material-ui/icons

// Roboto is the font Material-UI is based around, ofc you can omit this
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

// Font Icons
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Example 2: react js material ui

//install in the terminal
$ npm install @material-ui/core

// use the CDN 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

//on the component
import { Button } from '@material-ui/core';

function App() {
  return <Button color="primary">Hello World</Button>;
}

Example 3: material ui react

CDN
You can start using Material-UI with minimal Front-end infrastructure, which is great for prototyping.

Two Universal Module Definition (UMD) files are provided:

one for development: https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js
one for production: https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js

Material-UI is available as an npm package.

npm
To install and save in your package.json dependencies, run:

// with npm
npm install @material-ui/core

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

Example 4: material ui

import TextField from '@material-ui/core/TextField'

<TextField
                id="slots" 
                type="number"
                min={1}
                defaultValue="1"
                className="TextField pa2" 
                onChange={handleChange} 
                label="number of slots" 
                InputProps={{ 
                    inputProps: { min: 1} 
                 }}
                InputLabelProps = {{
                    shrink:true,
                }}/>