How To Create a Responsive Web App Using Material-UI

One of the key parts of developing a web app is making it responsive.

Build a Material-UI Responsive Web App.

In this post, we’ll look at how to create a responsive web app using Material-UI on top of ReactJs.

MUI will be used to refer to Material-UI.

MUI is an open-source React component library that implements Google’s Material Design, and it offers a variety of prebuilt components.

As a Frontend Engineer, you will agree with me that, aside from creating an interactive web app with logic.

There are more topics to focus on that also include Responsive web design.

Responsive web design lets your content, such as text, videos, photos, and so on, flow freely across all screen resolutions and sizes, making them look excellent on smartphones.

Previously, responsive web design could be done using media queries in CSS, but in this post, we will explore how to do it using MUI (MaterialUI).

So I’ll be using CRA (create react app) to build our app. So, open your terminal and enter the following command.

npx create-react-app mui-responsive-web-app

To make our app, I used create-react-app.

If the command was successful, you should see the words “Happy hacking!” on your terminal.

The next step is to cd into the directory and install MUI with the following command, either using npm or yarn.

npm install @mui/material @mui/styled-engine-sc styled-components

MUI uses breakpoints to identify precise layout needs, which respond to screen size and orientation using keys such as xs sm md lg xl, the values of which may still be changed.

Media queries are used when creating a responsive web app in CSS.

However, with MUI media queries are exposed out of the box via the theme.

Properties of breakpoints include:

Theme.breakpoints.up(key):

This query matches screen widths larger than the breakpoint key.

i.e. styles will be applied to values after max-width upwards.

Theme.breakpoints.down(key):

This query looks for a screen width that is smaller than the screen size specified by the breakpoint key.

i.e. styles will be applied to the value before the min-width downwards.

theme.breakpoints.only(key):

This query matches the screen width starting at the breakpoints key and ending at the next breakpoints key.

i.e. styles will be applied to values between the min-width and max-width.

theme.breakpoints.not(key):

This query matches the screen width starting at the screen size given by the breakpoint key and ending at the screen size given by the next breakpoint key (inclusive) Styles.

For example, will not be applied to values between the min-width and max-width.

theme.breakpoints.between(start, end):

This query matches screen widths higher than the breakpoint key in the first argument (inclusive) and less than the breakpoint key in the second argument (exclusive).

i.e. styles are applied to values inside the first and second keys.

Now that we’ve covered the MUI breakpoints, let’s look at how we can use the styled component technique to modify the app backdrop and text font size inside the app.js file.

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { styled } from "@mui/material/styles";

const Wrapper = styled(Box)(({ theme }) => ({
  background: "#1976d2",
  height: "100vh",
  [theme.breakpoints.down("md")]: {
    background: "orange",
  },
  [theme.breakpoints.down("sm")]: {
    background: "blue",
  },
  [theme.breakpoints.up("lg")]: {
    background: "purple",
  },
}));

const Heading = styled(Typography)(({ theme }) => ({
  textAlign: "center",
  color: "white",
  fontWeight: 600,
  paddingTop: "2em",
  [theme.breakpoints.down("md")]: {
    fontSize: "1.5rem",
  },
}));

function App() {
  return (
    <Wrapper>
      <Heading variant="h1">This is an Heading tag</Heading>
    </Wrapper>
  );
}

export default App;

The final result is shown below:

Fully responsive app design.

👋 Need Web Development Help?

I’m your go-to web developer, and I’m flexible to meet your needs. Whether you’re looking for a remote team member or a freelance expert, I’ve got you covered.

My Expertise: I specialize in:

• 💡 ReactJS
• 🎨 UI/UX Designer
• 🚀 Backend development
• 🌐 APIs
• 🚀 Node.js
• 🎨 Responsive designs
• 🏗️ Building websites from scratch
• 📊 Database management
• ✨ Figma design

Let’s Work Together: Whether it’s a small task or a big project, I’m dedicated to delivering results.

🤝 Ready to Start? Reach out to me at prehandev@gmail.com or find me on Upwork.

Thank you for considering me, Looking forward to working together!

Warm regards,

P. Rehan.