How to Use CSS Breakpoints in Material UI

In the world of web design, CSS breakpoints help us design a more robust, responsive website, detecting when to show and hide certain elements, resizing components to fit, or stretch on mobile devices, achieving a smooth user experience.

In this article we will discuss how to use CSS breakpoints in Material UI.

Here is the example Github repo we will be using if you just want to dive into the code. You can view the Readme to get started.

EntryLevelDeveloperTraining/material-ui-breakpoints

What is a CSS breakpoint?

A breakpoint is defined in CSS when it detects certain screen sizes, and when the defined breakpoint is hit it will then show appropriate content for that screen size. For instance, on a desktop browser you have plenty of room to show large and wide elements, however, on a mobile device you have to plan out what you absolutely need to show and what will decrease in size.

How do I use a breakpoint in CSS?

@media only screen and (max-width: 600px) {
  body {
    background-color: green;
  }
}

In this CSS example we define a breakpoint with a media query. It sets a break point, saying only apply this CSS if the screen has a max width of 600 pixels or less. When the screen size if 600 pixels or less, it will apply the green background color. When the screen size is greater, it will not apply the green background.

Now let’s see how we can achieve the same thing using Material UI.

useMediaQuery

useMediaQuery is a Material UI React hook that you can use in your component, that when hit will cause a re-render, thus giving you control on whether you want to show or hide components, and so much more.

Let’s begin by using a simple media query.

const SimpleMediaQuery = () => {
  const matches = useMediaQuery("(min-width:600px)");
  
  if (matches) {
    return (
      <Paper elevation={5}>
        <Box p={5}>SimpleMediaQuery breakpoint has a min width of 600px</Box>
      </Paper>
    );
  }
  return <></>;
};

Using the React hook:

const matches = useMediaQuery("(min-width:600px)");

This will check if the breakpoint has a minimum width of 600px. If it matches, meaning if the screen is at least 600px or greater, then it will render the text. If it doesn’t match then it wont render anything.

Now let’s use a breakpoint helper to achieve the same thing.

const BreakpointHelper = () => {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up("sm"));
  
  if (matches) {
    return (
      <Paper elevation={5}>
        <Box p={5}>
          BreakpointHelper will render everything up from 'sm' which is 600px
        </Box>
      </Paper>
    );
  }
  return <></>;
};

So let’s explain the breakpoint helper:

theme.breakpoints.up(“sm”) 

This is creating a breakpoint based upon the helpers setup by Material UI.

xs, extra-small: 0px
sm, small: 600px
md, medium: 960px
lg, large: 1280px
xl, extra-large: 1920px

So anything that is up, or greater than sm, which is 600px, then render the text.

There are other methods of achieving this as described on the Material UI website.

Media queries in React for responsive design - Material-UI

Using breakpoints in makeStyles

const useStyles = makeStyles((theme) => ({
  root: {
    [theme.breakpoints.down("sm")]: {
      backgroundColor: theme.palette.secondary.main,
    },
    [theme.breakpoints.up("md")]: {
      backgroundColor: theme.palette.primary.main,
    },
    [theme.breakpoints.up("lg")]: {
      backgroundColor: "green",
    },
  },
}));
const MakeStylesExample = () => {
  const classes = useStyles();
  return (
    <Paper elevation={5} className={classes.root}>
      <Box p={5}>The background color will change based on screen width</Box>
    </Paper>
  );
};

This example uses the makeStyles function to create styles we can use in our component. First we setup a root class name and we assign it to the Paper component’s className.

<Paper elevation={5} className={classes.root}>

We give the makeStyles root to the Paper className.

[theme.breakpoints.down("sm")]: {
  backgroundColor: theme.palette.secondary.main,
}

When the breakpoint hits, using the breakpoint helpers, it will apply that CSS to the element and change the background color.

Using the Box component

The Box component in Material UI is the best invention in our modern times. You can easily style components without using a lot of CSS. We can also use the breakpoint helpers to show or hide certain elements, and so much more.

const BoxExamples = () => {
  return (
    <Paper elevation={5}>
      <Box p={5} display={{ xs: "block", sm: "none", md: "block" }}>
        This will hide on `sm` but show as a `block` on `xs` and `md`
      </Box>
    </Paper>
  );
};

There are many properties on the Box component that enable us to use shorthand breakpoint helpers. In this example we are saying that for the display, when the breakpoint for xs is hit, then it will become a block element. When the breakpoint for sm is hit, then it wont render, having a display of none.

You can check out all the properties you can use on the Box component here:

@material-ui/system - Material-UI

Using the styled-components package

There are many ways to use CSS in React. This example will go over how to use Material UI with styled-components.

import { compose, spacing, palette, breakpoints } from "@material-ui/system";
import styled from "styled-components";
const Box = styled.div`
  ${breakpoints(compose(spacing, palette))}
`;
const BoxExamples = () => {
  return (
    <Paper elevation={5}>
      <Box p={{ xs: 5, sm: 10 }}>This uses a styled-components Box</Box>
    </Paper>
  );
};

So this will make a styled component div element and create it with the Material UI breakpoints function helper.

const Box = styled.div`
  ${breakpoints(compose(spacing, palette))}
`;

This will enable the styled component to use our breakpoint helpers. Now we can say that when the xs breakpoint is hit, it will have a padding of 5, and when the sm breakpoint is hit, it will have a padding of 10.

Conclusion

Material UI has a lot of breakpoint magic built in so you can get something responsive without coding a lot of custom CSS. We went over Material UI hooks and helpers to use in our components and we checked out how we can use styled components by using Material UI breakpoint helpers.

There are other packages out there than can achieve the same results. What is your favorite package for using CSS breakpoints?