Implementation of Material UI in Nextjs

In this post, we will learn about the most widely used UI Component library MUI (Material UI) in React. You can also checkout our another blog, where we using tailwind css in material-ui.

What is MUI?

Material UI is a library of React UI components that implements Google’s Material Design. For reference, you can check MUI.

Material UI is an open-source React component library that implements Google’s Material Design.

In addition, it includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box.

Why should we opt for MUI?

Since there are plenty of choices when going forward to use a FrontEnd UI library, then why choose Material UI over the rest?

Here are the following advantages I found during the R&D while I was going through the dilemma.

Salient Features –

Scalability:

• Scalability is a vital product design factor. It is the major point where MUI is far ahead of the rest of UI libraries as it provides scalability and customization hand in hand.

• If you’re building a design system from scratch, designers must design, prototype, and test new components before scaling the product.

• With MUI’s comprehensive UI library, designers can search for the components they need to prototype and scale right away.

• Engineers can copy/paste the identical React components from MUI and customize them to the designer’s specifications.

• MUI X: includes a library of advanced React components teams can use to scale complex products even faster, including data grids, date pickers, charts, pagination, filtering, and more.

Accessibility:

• Those experienced with setting up a design system will know the time and money it takes to ensure every component passes accessibility standards.

• MUI’s designers have taken great care in designing components to meet WCAD 2.0 accessibility guidelines – reducing the work for researchers and designers.

• It’s important to note that even when you design interfaces using accessible components, you must still test navigation and user flows to ensure the product as a whole meets accessibility standards.

• Customizability: The library includes an extensive set of intuitive customizability features. The templates in our store demonstrate how far you can go with customization.

• Ship faster: Over 2,500 open-source contributors have poured countless hours into these components. Focus on your core business logic instead of reinventing the wheel—we’ve got your UI covered.

Beautiful by default:

•  We’re focusing on precisions & are very careful about our implementation of Material Design.

• Ensuring that every Material UI component meets the highest standards of form and function, but diverges from the official spec where necessary to provide multiple great options.

Add on Features –

Faster Time-to-Market:

• In today’s highly competitive tech landscape, time-to-market is a metric that organizations always seek to optimize.

• A component library gives designers and developers a massive headstart with thoroughly tested UI elements ready to go.

Easy Maintenance:

• A component library like MUI comes with detailed documentation for installing, using, updating, and customizing components.

• Designers and engineers can use this framework to maintain the organization’s design system, making it easier to establish governance systems and protocols.

• MUI also provides how-to guides for migrating from one version to the next. So, organizations can take advantage of the latest UI styles, technologies, and trends whenever MUI releases an update.

Trusted by thousands of organizations: 

• Material UI has the largest UI community in the React ecosystem.

• It’s almost as old as React itself—its history stretches back to 2014—and we’re in this for the long haul. You can count on the community’s support for years to come (e.g. Stack Overflow).

• Furthermore, there is an endless list of the advantages and ease MUI provides. You can go through more.

Besides, you can also refer to detailed comparision, major Differences, and pros and cons of the most widely used reliable FrontEnd Libraries via this reference.

Installation Of MUI

Installing React Hook Form only takes a single command and you’re ready to roll.

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

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

In addition, if you are using react version above 16.8.0 you may get an error “Could not resolve dependency:” on installing- material-ui, to start with the library & install material-ui/core.

Use the cmd npm install —legacy-peer-deps. Finally, you can proceed with the installation.

Syntax

// Stepper Component
import {Typography,Stepper,Step,StepLabel,Button} from "@material-ui/core";

// Form Components
import { Button,TextField} from '@material-ui/core';

//index page
import {CssBaseline,Container,Paper,Box} from "@material-ui/core"

Some Common Components In MUI

• CssBaseLine: It comes under the Utils Categoryin Compoents. The CssBaseline component helps to kickstart an elegant, consistent, and simple baseline to build upon.

• Container: The container centers your content horizontally. It’s the most basic layout element.

Paper:

• In Material Design, the physical properties of paper are translated to the screen.

• The background of an application resembles the flat, opaque texture of a sheet of paper, and an application’s behavior mimics paper’s ability to be re-sized, shuffled, and bound together in multiple sheets.

Box:

• Box comes under the Layout Category of UI Components. The Box component serves as a wrapper component for most of the CSS utility needs.

• The Box component packages all the style functions that are exposed in @mui/system.

TextField:

• Text Fields let users enter and edit text. It allows users to enter text into a UI. They typically appear in forms and dialogs.

• The TextField wrapper component is a complete form control including a label, input, and help text. It comes with three variants: outlined (default), filled, and standard.

Button:

• It is an Input Component. Buttons allow users to take actions, and make choices, with a single tap.

• Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:
  
  • Modal windows
  • Forms
  • Cards
  • Toolbars

Typography:

• Typography is a Data-Display Component. The Typography component makes it easy to apply a default set of font weights and sizes in your application.

• This component uses the variantMapping prop to associate a UI variant with a semantic element. It’s important to realize that the style of a typography component is independent of the semantic underlying element.

Stepper:

• Stepper is a Navigation Component. Steppers convey progress through numbered steps. It provides a wizard-like workflow. To display progress through a sequence of logical and numbered steps we use steppers.

• They may also be used for navigation. Steppers may display a transient feedback message after a step is saved.

• See the documentation below for a complete reference to all of the props and classes available to the components mentioned here:
• <MobileStepper />
• <Step />
• <StepButton />
• <StepConnector />
• <StepContent />
• <StepIcon />
• <StepLabel />
• <Stepper />

Check out all Components Available in MUI –

• For references and get familiar with other Components in MUI, you can refer to Component APIs.

Let’s take a small example to understand & implement MUI –

To create Linear Stepper in Nextjs (React) using the MUI library.

• To brief the Project, in this example we are using the MUI library to make a Stepper that has Steps coming from an array of steps, moreover, we have Step Content that gets shown as per the Active Step running.

• Here, we pass 3 different Forms as Child Components to the switch cases which are shown in the Active Step content.

• Another reward to the readers, who have read my blog on how to implement UseForm in Nextjs| React we are using the useForm hooks, its props, and methods once again in the Form Components.

• So I guess it will be a great recap and revision for all of you and those who haven’t checked out the blog on useForm hook yet. I suggest you go through it once I can assure you will find it pretty useful and interesting, how we have made it easy and elaborated its working.

• Coming back to the Project, in the Form Components(Personal Details, Address, Payment), we are using the TextField Component of MUI to take the input and edit, as an add-on we are using the register method of useForm to register the data.

• We have also used the Button Component of MUI to submit the form and used the props like variant as filled, label, and fullwidth.

• I have made a Sass file to style my section and buttons in the forms, you can create and use your styles accordingly.

Personal Detail Component

//Personal Details Component
import React from "react";
import { useForm } from "react-hook-form";
import { Button, TextField } from "@material-ui/core";
import styles from "./Form.module.scss";

const PersonalDetails = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <>
      <section className={styles.section}>
        <form onSubmit={handleSubmit(onSubmit)}>
          <TextField
            variant="filled"
            type="text"
            label="First Name"
            placeholder="First Name"
            fullWidth
            {...register("firstName", { required: true })}
          />
          {errors.firstName && errors.firstName.type && (
            <span>This field is required</span>
          )}
          <TextField
            variant="filled"
            type="text"
            label="Last Name"
            placeholder="Last Name"
            fullWidth
            {...register("lastName", { required: true })}
          />
          {errors.lastName && errors.lastName.type && (
            <span>This field is required</span>
          )}
          <TextField
            variant="filled"
            type="email"
            label="Email Address"
            placeholder="Email Address"
            fullWidth
            {...register("email", { required: true })}
          />
          {errors.email && errors.email.type && (
            <span>This field is required</span>
          )}
          <TextField
            variant="filled"
            type="tel"
            label="Phone Number"
            placeholder="Phone Number"
            fullWidth
            {...register("phone", { valueAsNumber: true }, { required: true })}
          />
          {errors.phone && errors.phone.type && (
            <span>This field is required</span>
          )}
          <div className={styles.btn}>
            <Button type="submit" variant="contained" color="primary">
              Save
            </Button>
          </div>
        </form>
      </section>
    </>
  );
};

export default PersonalDetails;

Address Component

//Address Component
import React from "react";
import { useForm } from "react-hook-form";
import { Button, TextField } from "@material-ui/core";
import styles from "./Form.module.scss";

const Address = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <>
      <section className={styles.section}>
        <form onSubmit={handleSubmit(onSubmit)}>
          <TextField
            variant="filled"
            fullWidth
            label="Address Line 1"
            type="text"
            placeholder="Address Line 1"
            {...register("address1", { required: true })}
          />
          {errors.address1 && errors.address1.type && (
            <span>This field is required</span>
          )}
          <TextField
            variant="filled"
            fullWidth
            label="Address Line 2"
            type="text"
            placeholder="Address Line 2"
            {...register("address2", { required: true })}
          />
          {errors.address2 && errors.address2.type && (
            <span>This field is required</span>
          )}
          <TextField
            variant="filled"
            fullWidth
            label="City"
            type="text"
            placeholder="City"
            {...register("city", { required: true })}
          />
          {errors.city && errors.city.type && (
            <span>This field is required</span>
          )}
          <TextField
            variant="filled"
            fullWidth
            label="State"
            type="text"
            placeholder="State"
            {...register("state", { required: true })}
          />
          {errors.state && errors.state.type && (
            <span>This field is required</span>
          )}
          <TextField
            variant="filled"
            fullWidth
            label="Zip Code"
            placeholder="Zip Code"
            {...register("zip", { valueAsNumber: true }, { required: true })}
          />
          {errors.zip && errors.zip.type && <span>This field is required</span>}
          <div className={styles.btn}>
            <Button type="submit" variant="contained" color="primary">
              Save
            </Button>
          </div>
        </form>
      </section>
    </>
  );
};

export default Address;

Payment Component

//Payment Component
import React from "react";
import { useForm } from "react-hook-form";
import { Button, TextField } from "@material-ui/core";
import styles from "./Form.module.scss";

const Payment = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <>
      <section className={styles.section}>
        <form onSubmit={handleSubmit(onSubmit)}>
          <TextField
            variant="filled"
            fullWidth
            label="Card Number"
            placeholder="Card Number"
            {...register("card", { valueAsNumber: true }, { required: true })}
          />
          {errors.card && errors.card.type && (
            <span>This field is required</span>
          )}
          <TextField
            variant="filled"
            fullWidth
            label="CVV"
            placeholder="CVV"
            {...register("cvv", { valueAsNumber: true }, { required: true })}
          />
          {errors.cvv && errors.cvv.type && <span>This field is required</span>}
          <TextField
            variant="filled"
            fullWidth
            label="Valid till"
            placeholder="mm-yyyy"
            {...register("validity", { valueAsDate: true }, { required: true })}
          />
          {errors.validity && errors.validity.type && (
            <span>This field is required</span>
          )}
          <div className={styles.btn}>
            <Button type="submit" variant="contained" color="primary">
              Save
            </Button>
          </div>
        </form>
      </section>
    </>
  );
};

export default Payment;

Stepper Component

• First, we created a Linear Stepper component, and then imported the required MUI components –
  Typography, Stepper, Step, StepLabel, Button from Material UI.

• Here, we mapped the steps array to the Stepper to pass the elements of the steps as StepLabel.

• After that created a function generateStep in which we created the switch Cases which return our Form Components according to the activeStep.

• Lastly, we used the handleBack and handleNext buttons to increment and decrement the activeStep value using the SetActiveStep.

• Used Typography to show “Thank You” after all steps are completed. This is done through the conditions I have applied for getting the desired output. You can implement your own conditions.

• I haven’t used the StepContent Component in my Horizontal Stepper you can go through it, and can implement it.

import React, { useState } from "react";
import {
  Typography,
  Stepper,
  Step,
  StepLabel,
  StepContent,
  Button,
} from "@material-ui/core";
import styles from "./LinearStepper.module.scss";
import PersonalDetails from "./PersonalDetails";
import Payment from "./Payment";
import Address from "./Address";

const LinearStepper = () => {
  const [activeStep, setActiveStep] = useState(0);
  const steps = getSteps();

  function getSteps() {
    return ["PersonalDetails", "Address", "Payment"];
  }

  function getStepContent(step) {
    switch (step) {
      case 0:
        return <PersonalDetails />;
      case 1:
        return <Address />;
      case 2:
        return <Payment />;
      default:
        return "";
    }
  }

  const handleBack = () => {
    setActiveStep((activeStep) => activeStep - 1);
    console.log(activeStep);
  };
  const handleNext = () => {
    setActiveStep((activeStep) => activeStep + 1);
    console.log(activeStep);
  };
  return (
    <div>
      <Stepper activeStep={activeStep}>
        {steps.map((step, index) => {
          return (
            <Step key={index}>
              <StepLabel>{step}</StepLabel>
            </Step>
          );
        })}
      </Stepper>
      <div>{getStepContent(activeStep)}</div>
      {activeStep === steps.length ? (
        <Typography variant="h3" align="center">
          Thank You
        </Typography>
      ) : (
        <div className={styles.btn}>
          <Button
            variant="contained"
            color="primary"
            onClick={handleBack}
            disabled={activeStep === 0}
          >
            Back
          </Button>
          <Button variant="contained" color="primary" onClick={handleNext}>
            {activeStep === steps.length - 1 ? "Finish" : "Next"}
          </Button>
        </div>
      )}
    </div>
  );
};

export default LinearStepper;

To render the Stepper Component

We have imported the LinearStepper Component in the index page and rendered the stepper in the Container Component.

Further, we have passed prop component=’Box’, here the component used for the root node. Either a string to use an HTML element or a component.

You can style your customized CSS in any of the MUI Component by using the props sx, you can customize it as per your needs.

//index page
import LinearStepper from "@/components/LinearStepper";
import { CssBaseline, Container, Paper, Box } from "@material-ui/core";

export default function Home() {
  return (
    <>
      <CssBaseline />
      <Container component={Box} p={4}>
        <Paper component={Box} p={3}>
          <LinearStepper />
        </Paper>
      </Container>
    </>
  );
}

Let’s see the output below.

This is a small example to understand the MUI in Nextjs/React. To Clear any doubt you can read again.

Stay tuned till then.

Happy Coding !!