Material UI React Components

React is one of the most used web frameworks due to its component based approach. There are tons of component libraries that provide us pre pre-built front-end components. React believes in isolated components with high usability which inspires these front-libraries. Material UI is one of such libraries that is quite popular in the industry. In this article, we will see what Material UI is and how we can use it in our projects. So, let us get started.

 

What is Material UI?

Material UI is a component based library inspired by Google’s Material Design systems and is extremely popular in creating web and mobile applications. It enabled the developers to create smooth and fluid designs without implementing everything from scratch. Let us see how we can install and use it in a React project.

 

Prerequisites

To use this library in your project, make sure you have installed Node.js and Node Package Manager in your machine. You will also be needing a code editor.

 

Getting started

Navigate to the directory of your choice and enter the following command to create a react project.

npx create-react-app material-ui-example

Once the project dependencies install, navigate to the project directory and install the Material UI library for react with the following command.

npm install @mui/material @emotion/react @emotion/styled

 

Setting the font

Material UI is based on Roboto font and to use it, navigate to public/index.html and add the following tag in the head section.

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

 

Installing SVG icons

In Material UI, you have a separate package for using SVG icons inside your project. We can install it with the following command.

npm install @mui/icons-material

 

Cleaning the project

By default, you get the following files in a react project.

 

Let us clean it and make it look like below.

 

App.js

function App() {

  return (

    <div>

   //our code here

    </div>

  );

}



export default App;

 

Index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";



ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

 

 

Using the components

Material UI offers tons of components that are essential while creating beautiful frontends. Let us diver deeper into the library and see what it has to offer.

 

Button 

import * as React from "react";
import Button from "@mui/material/Button";



export default function App() {
 return (
   <>
     <Button variant="text" size="small" color="success">
       Text
     </Button>

     <Button variant="contained" size="medium" color="warning">
       Contained
     </Button>

     <Button variant="outlined" size="large" color="error">
       Outlined
     </Button>
   </>
 );
}

The button component offers different props for the functionality. In the above code, we have 3 buttons with different variants, sizes and colors. 

 

Button Group

import * as React from "react";
import Button from "@mui/material/Button";
import ButtonGroup from "@mui/material/ButtonGroup";



export default function App() {
  return (
    <ButtonGroup variant="contained" aria-label="outlined success button group">
      <Button color="success">One</Button>
      <Button color="warning">Two</Button>
      <Button color="error">Three</Button>
    </ButtonGroup>
  );
}

 You also get a button group component that lets you use buttons as a group. It accepts the variant prop and you can apply individual styles to the button components.

 

 

Icons

import * as React from "react";
import DeleteIcon from "@mui/icons-material/Delete";
import ThreeDRotationIcon from "@mui/icons-material/ThreeDRotation";
import FourKIcon from "@mui/icons-material/FourK";
import ThreeSixtyIcon from "@mui/icons-material/ThreeSixty";


export default function App() {
  return (
    <>
      <DeleteIcon />
      <ThreeDRotationIcon />
      <FourKIcon />
      <ThreeSixtyIcon />
    </>
  );
}

We have four different Icons that are in the Material UI icons library. All of these use the SVG Icon component to render the path for the each icon. 

 

 

In case you aim to use a different SVG that is not in the material icons library, you can do it as follows.

import { SvgIcon } from "@mui/material";
import * as React from "react";



export default function App() {

  return (
    <>
      <SvgIcon>
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
      </SvgIcon>
    </>
  );
}

 

Accordion

import * as React from "react";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import Typography from "@mui/material/Typography";
import ExpandMoreIcon from "@mui/icons-material/Expand";


export default function App() {
  return (
    <div>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography>Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>Accordion 1 text</Typography>
        </AccordionDetails>
      </Accordion>

      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel2a-content"
          id="panel2a-header"
        >
          <Typography>Accordion 2</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>Accordion 2 text</Typography>
        </AccordionDetails>
      </Accordion>

      <Accordion disabled>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel3a-content"
          id="panel3a-header"
        >
          <Typography>Disabled Accordion</Typography>
        </AccordionSummary>
      </Accordion>
    </div>

  );

}

The Accordion component wraps AccordionSummary which wraps the AccordionDetail component. Inside the detail, we add content as we please. To disable the accordion, just pass the disabled prop to it. 

 

 

Typography

import * as React from "react";
import Typography from "@mui/material/Typography";


export default function App() {
  return (
    <>
      <Typography variant="h1" component="div">
        h1. Heading
      </Typography>

      <Typography variant="h2" component="div">
        h2. Heading
      </Typography>

      <Typography variant="h3" component="div">
        h3. Heading
      </Typography>

      <Typography variant="h4" component="div">
        h4. Heading
      </Typography>

      <Typography variant="h5" component="div">
        h5. Heading
      </Typography>

      <Typography variant="h6" component="div">
        h6. Heading
      </Typography>

      <Typography variant="subtitle1" component="div">
        Subtitle 1
      </Typography>

      <Typography variant="subtitle2" component="div">
        Subtitle 2
      </Typography>

      <Typography variant="body1">Body1</Typography>

      <Typography variant="body2">Body2</Typography>

      <Typography variant="button" display="block">
        button text
      </Typography>

      <Typography variant="caption" display="block">
        caption text
      </Typography>

      <Typography variant="overline" display="block">
        overline text
      </Typography>
    </>
  );
}

In the above code, we have the typography component which has a lot of variants. 

 

Alerts

import * as React from "react";
import Alert from "@mui/material/Alert";


export default function App() {
  return (
    <>
      <Alert severity="error">This is an error alert</Alert>
      <Alert severity="warning">This is a warning alert</Alert>
      <Alert severity="info">This is an info alert</Alert>
      <Alert severity="success">This is a success alert</Alert>
    </>
  );
}

Material UI has 4 different alerts which are used above.

 

 

Card 

import * as React from "react";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

export default function App() {
  return (
    <Card sx={{ maxWidth: 275 }}>
      <CardContent>
        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
          Word of the Day
        </Typography>
        <Typography variant="h5" component="div">
          Material
        </Typography>
        <Typography sx={{ mb: 1.5 }} color="text.secondary">
          Noun
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>
  );
}

The main card component is the outer component which has CardContent for the visual data and CardActions for event handling.

 

TextField

import * as React from "react";
import TextField from "@mui/material/TextField";

export default function App() {
  return (
    <>
      <TextField id="outlined-basic" label="Outlined" variant="outlined" />
      <TextField id="filled-basic" label="Filled" variant="filled" />
      <TextField id="standard-basic" label="Standard" variant="standard" />
    </>
  );
}

 

Conclusion

Material UI enables the developers to make beautiful designs. In this article, we have seen how you can install and use Material UI in your react project. We have used some of the components that will be enough to set you up for further learning.