Creating a responsive website with Material UI

In this article, I’d like to share you how to create a responsive website with Material UI.

Material UI has several methods of responsive styling, and resently I had an opportunity to make my web service responsive. So I will introduce them here.

Outline

1. How to use media query
2. How to useMediaQuery
3. How to set and use theme.breakpoints
4. How to use theme.breakpoints

How to use media query

As you may be familiar with in your everyday use of CSS, etc., media query can also be used in Material UI.

<Box component="span" sx={{
    fontSize: "1rem",
    "@media screen and (min-width:600px)": {
        width: ".8rem",
    },
}} >
    YOUR TEXT HERE !
</Box>

The only difference from everyday use media query is that it needs to be enclosed in “‘’” or “””.

This writing style is probably the easiest to write because it is familiar.

How to useMediaQuery

The next useMediaQuery is unique to Material UI.

It is intended for use on React and returns a result of true or false.
The behavior is similar to that of useState.

import { useMediaQuery } from "@mui/material";
import Link from "next/link";

const navBar = () => {
    const matches: boolean = useMediaQuery("(min-width:600px)");
    {matches ? (
        <Box component="div">
            <Link href="/" passHref>
                <Button color="secondary">BUTTON</Button>
            </Link>
        </Box>
    ) : (
        <Box></Box>
    )}

In the above example, the screen width is set to be true when the screen width is 600px or greater and false when the screen width is 600px or less, and the buttons are displayed separately when MATCHES is true and when it is false.

You can also use Material UI breakpoints to describe this.

const matches: boolean = useMediaQuery(() => theme.breakpoints.up("sm"));

However, if you try to style with this, you will have to write elements in double or triple layers, which will be difficult to see and will take more time to load, so it should not be used very often unless there is a special reason.

It can be very useful if you want to animate the elements using useEffect, etc.

How to set and use theme breakpoints

The method of using theme breakpoints is to use the Material UI theme introduced previously.

Material UI can be responsively styled by setting something called breakPoints.

Initial values

• xs: 0
• sm: 600
• md: 900
• lg: 1200
• xl: 1536

You can hit a breakpoint at any position by doing the following

import { createTheme } from "@mui/material/styles";

let theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 768,
      lg: 1025,
      xl: 1536,
    },
  },

The actual method of using breakPoints is to use them in the sx property as shown below.
In this case, the width is 600px or more, block is used, and 599px or less is set to “none”.

<Box
  component="div"
  sx={{
    display: { xs: "none", sm: "block" },
  }}
 >
   <Link href="/" passHref>
     <Button color="secondary">BUTTON</Button>
   </Link>
 </Box>

I feel that this method is the easiest to see when using Material UI.
From the perspective of multiple implementations, it seems to provide uniformity and prevent mistakes.

Summary

In this article, we have shown how to style responsively with Material UI.

Personally, I think it is easier to read and commonize.

• Set and use theme.breakpoints

is a good way to use Material UI from the viewpoint of readability and commonality.

There are still some interesting elements in Material UI that I would like to introduce again.

Thank you for reading.