• Material-UI is a popular open-source library for building user interfaces in React.
  • Use for make beautiful design with React JS.
  • Using this, website UI looks like mobile app.
  • Material-UI offers a wide range of ready-to-use components such as buttons, forms, navigation bars, dialog boxes, icons, and more, which can be easily integrated into React applications.
  • Material UI is also used with other framework, such as Angular and Vue.js
  • Sources for each framework is different.
  • Current Version in v5
  • Initial release in 2014.


  • Node Js and NPM should be installed.
  • Create react app
  • Install Material UI
    • For v4
      • npm install @material-ui/core
      • Add CSS in index.html
        • <link rel="stylesheet" href=",400,500,700&display=swap" />
    • For v5
      • npm install @mui/material @emotion/react @emotion/styled
      • npm install @fontsource/roboto
  • Import material-ui on component where it is used.
    • Example mentioned below:
      • import Button from ‘@mui/material/Button’; (v5)
      • import {Button} from ‘@mui/material’; (v5)
      • import {Button} from ‘@material-ui/core’; (v4)
      • import Button from ‘@material-ui/core/Button’; (v4)


  • Use of buttons
    • color=”defaul/inherit/primary/secondary” => To change color
    • variant=”contained/outlined/text”
      • contained=> For background color
      • Outlined=> For Border Color
      • Text => For text color (is default)
  • Icon with button
    • Install package
      • npm install @mui/icons-material (v5)
      • npm install @material-ui/icons(v4)
        • To Use:
          • import Delete from @material-ui/icons/Delete
          • startIcon={<Delete/>}
          • endIcon={<Delete />}
  • Button size
    • size=”small/medium/large” => Default is medium


  • To Use:
    • Import buttongroup
      • import {ButtonGroup,Button} from @material-ui/core
		Wrap buttons in ButtonGroup
			<Button >But 1</Button>
			<Button >But 2</Button>
			<Button >But 3</Button>
		</ ButtonGroup>
  • Import checkbox
    • import {checkbox} from @material-ui/core
    • import from @material-ui/core/checkbox
  • color of checkbox
    • <Checkbox color=”default/primary/secondary” />
  • indeterminate property in checkbox
  • custom icon in checkbox
    • icon={<FavoriteBorder />}
    • checkedIcon={<Favorite />}

Radio Button

  • use of radio button
    • import {Radio} from @material-ui/core
    • import Radio from @material-ui/core/Radio
  • Import radio button
  • color of radio button
  • onChange event on radio button
  • use state with radio button


  • use of Slider
    • Used slide between a range
  • Import Slider
    • import {Slider} from @material-ui/core
    • import Slider from @material-ui/core/Slider
  • color of Slider
  • defaultValue

marks={function_name} // to display current text of slider

  • maxValue
  • show marks
  • show Label
  • onChange event on Slider
  • vertical Slider

Range Slider

  • Use Slider
  • Make it Range slider by value
  • Add change event
  • Update value with state


  • Select Box or Select
  • Use Select
    • import {Select, MenuItem} from ‘@material-ui/core’
  • Use MenuItem to make a dropdown
  • PlaceHolder
  • use state with a value
  • onChange event
    const updateValue=(e)=>{

        value={ course}
        <MenuItem value =''>Select Course</MenuItem>
        <MenuItem value ={1}>Node</MenuItem>
        <MenuItem value ={2}>JavaScript</MenuItem>
        <MenuItem value ={3}>Java</MenuItem>
        <MenuItem value ={4}>PHP</MenuItem>
    </select >

Text Field

  • use TextField
  • import TextField
    • import {TextField} from ‘@material-ui/core’
  • add placeholder
  • change look and feel
  • change type of TextField
  • get value of TextField with onChange event
        label=”enter name” // placeholder


  • Import Switch
    • import {Switch} from ‘@material-ui/core’
  • How to Use
    • Put <Switch /> where need to use
  • color
    • <Switch color={default|primary|secondary} />
  • Size
    • <Switch size={small|medium} />
  • onChange event
    • <Switch onChange={()=>getValue()} />
  • get value
    • const getValue = (e,val)=>{
        } <Switch onChange={()=>getValue()} />


    • Use of Box
      • Box is a part of Layout.
      • Box create a wrapper.
      • Box is used to manage Layout, it is not used to take input.
    • Import Box and Button
      • import {Box, Button} from ‘@material-ui/core’
    • use element with Box
      • <Box component=”span” style={{color:’red’}} clone m=”10” p=”10”>
      • use style with Box
        • In the above example clone will apply all the style with inner element.
      • use margin with Box
        • m is used for margin and p is used for padding.


      • Use of Container
        • Container manage the Layout like margin, padding,width,height etc.
      • Import Container
        • import {Container} from ‘@material-ui/core’
      • use Container
        • <Container maxWidth=”md” style={{background:’skyblue’}}>
            </Container >
        • different size of Container
          • Bydefault maxWidth is lg(which is used for large screen)
          • md for medium screen
          • sx for mobile screen.
          • fixed is used for auto scalling, which can pic their size automatically.

        Grid System For Responsive Layout

        • what is grid
          • Grid is used to make responsive apps.
          • Just like Bootstrap, it uses 12 block in a grid, which can be adjusted according to screen size.
        • why use grid
          • Use to make responsive app, which will look better in every screen size.
          • Where is a single row in a Grid.
        • how to use material ui grid
          • Import Grid
            • import {Grid} from ‘$material-ui/core’
          • <Grid container>
          • 12 block
          • what is xs, sm, MD, LG screen size
            • XS : Used from Mobile Screen Size
            • SM : Used for bid mobile or lablet.
            • MD : Used for small monitor
            • LS : Used for large Monitor

          Hidden Layout

          • what is hidden
            • hidden is a layout component in MUI.
          • why use hidden
            • This control the height,width, length and other attributes.
            • Used to hide any layout for any specific device.
          • how to use material ui hidden
            • import {Grid,Hidden} from ‘$material-ui/core’
            • <Grid container>
              • Block 3 will be hide in screen size related to SM.
              • Ex2:
              • <Grid container>

              Tabs | Tab | Tab Panel

              • Tabs is a collection where all tab will be show.
              • Import Tabs, Tab, and AppBar
                • import {Tap,Taps,AppBar} from ‘$material-ui/core’
              • Use Tabs and tab and get current tab value in the state
                • <AppBar>
                • Make a TabPanel component and hide and show it with the current tab
                • On click of Tab, value return to handleTabs is index of tab, using this index we can achive which tab need to show.

                Menu With React Routing

                • import menu
                • apply menu with menu item
                • install react-router dom and use it
                • make 2 component and use them as router
                    import React, { useState } from "react";
                    import { Menu, MenuItem, Button } from "@mui/material";
                    import { Link, Routes, Route, BrowserRouter as Router } from "react-router-dom";
                    export default function Test8() {
                      const [value, setValue] = useState(0);
                      const openMenu = (e) => {
                      const closeMenu = (e) => {
                      return (
                          <h1>Test Menu</h1>
                            <Button onClick={(e) => openMenu(e)}>Menu</Button>
                            <Menu open={value} onClose={closeMenu}>
                                <Link to="/">Home</Link>
                                <Link to="/about">About</Link>
                              <Route path="/" exact element={<Home />} />
                              <Route path="/about" element={<About />} />
                    function Home() {
                      return (
                          <h1>This is Home</h1>
                    function About() {
                      return (
                          <h1>This is About</h1>

                Leave a Reply

                Your email address will not be published. Required fields are marked *