How to Use Breakpoints in MUI’s SX Prop (5 Examples)

The sx prop makes responsive design and styling a simple process. This post shows five different applications of breakpoints with sx:

• Responsive layout
• Changing background color
• Changing font size
• Breakpoints in nested selectors
• Conditionally passing style objects

I believe the five tutorials below provide will provide guidance for almost any responsive design need you may have with MUI. Each section has screenshots and code examples.

Full code with imports can be found in the Resources section.

There’s a lot of valuable functionality provided by MUI styling systems. Here’s a complete guide to the MUI sx prop.

Here’s a YouTube video version of this post, or watch it below:

How to Use MUI Breakpoints in SX

One of the greatest things about the sx prop is that it provides a shorthand for accessing the theme breakpoint values.

Let’s learn by analyzing example code:

<Container sx={{
  display: 'flex', 
  flexDirection: {xs: 'column', sm: 'row'}}}
>
  {...children}
</Container>

This breakpoint logic is as follows:

• 0px to 599px – flexDirection: ‘column’
• 600px and up – flexDirection: ‘row’

Here’s what this looks like in media query syntax:

• @media (min-width: 0px) and (max-width: 599px) – flexDirection: ‘column’
• @media (min-width: 600px) – flexDirection: ‘row’

The sx prop breakpoints always assume min-width is intended. In my opinion, this nicely reduces the complexity of using breakpoints.

Here are the default breakpoints as listed in the MUI docs:

• xs, extra-small: 0px
• sm, small: 600px
• md, medium: 900px
• lg, large: 1200px
• xl, extra-large: 1536px

These breakpoints can be set to any pixel value, and additional breakpoints can be added. Here’s a guide to customizing breakpoints in the MUI Theme.

Create Responsive Layout with MUI SX Breakpoints

Perhaps the most common requirement for responsive design is for layouts to move from a ‘row’ to a ‘column’ direction.

In the previous section I provided a simple method to accomplish this. However, breakpoints provide the opportunity for more complex wrapping when used with flex.

Below we have three Paper components wrapped in a Box. The layouts are for xs, sm, and md. Notice that the sm design has the first two Papers sharing a row.

Take a look at the code below. There are several important stylings to notice.

• The Box needs flexWrap for the wrapping to work as shown above
• The flex values use calc to account for border and margin pixels.

const responsivePaper = {
  border: "1px solid gray",
  margin: 1,
  flex: { xs: "100%", sm: "calc(50% - 20px)", md: "calc(33% - 20px)" }

};

<Box sx={{ display: "flex", flexWrap: "wrap" }}>
  <Paper sx={responsivePaper}>One</Paper>
  <Paper sx={responsivePaper}>Two</Paper>
  <Paper sx={responsivePaper}>Three</Paper>
</Box>

Here’s how the flex values work in plain English:

• Each Paper has 100% width when the screen size is 599px or less
• Each Paper has (50% – 20px) width when the screen size is 600px to 899px
• Each Paper has (33% – 20px) width when the screen size is 900px or greater

Change Background Color with MUI SX Breakpoints

We can conditionally style any CSS property by breakpoints. This is not limited to width or flex.

In the example above, you may have noticed the background color was different at each screen size. Here’s the code:

backgroundColor: { xs: "blue", sm: "red", md: "yellow" }

It’s the same idea as flex above, even though background color has nothing to do with screen size. To see this code in action, add it to the responsivePaper object above.

Change Font Size with MUI SX Breakpoints

As components grow and shrink, it’s likely that font size should adjust as well.

Take a look at the code below. Notice that I have omitted the sm breakpoint. This means the font size will be 16px until the screen width reaches 900px.

fontSize: { xs: 16, md: 32 }

To see this styling in action, add it to the responsivePaper object in the Responsive Layout section.

Use MUI Breakpoints in SX Nested Selectors

Breakpoints in the sx prop can be used in nested selectors no matter how deep the nesting.

The MUI Badge component is composed of two spans, one of which wraps the other. The child span is the one that renders the visible portion of the Badge. It has class MuiBadge-badge applied by default.

We can use this nested selector with breakpoints to change the text color.

Take a look at the color style below. It changes the text color value at the xs and sm breakpoints. This is wrapped in a nested selector targeting the MuiBadge-badge span.

const responsiveBadge = {
  "& .MuiBadge-badge": {
    backgroundColor: "gray",
    color: { xs: "yellow", sm: "blue" },
  },
};

<Badge sx={responsiveBadge} badgeContent="style!">
  <Button variant="outlined">Lovely Button</Button>
</Badge>

Conditional SX Styling with MUI Breakpoints

This is a different spin on breakpoints with sx. Here I use MUI’s useMediaQuery hook to conditionally pass different styling objects to the sx prop based on screen size.

The hook detects screen size and constantly updates the xs size value. Then the conditional reevaluates and the correct style object is applied.

const buttonStyleXs = {
  borderColor: "primary.main",
};

const buttonStyleSm = {
  borderColor: "secondary.main",
};

const isXs = useMediaQuery("(max-width:600px)");

<Button variant="outlined" sx={isXs ? buttonStyleXs: buttonStyleSm}>
  Responsive
</Button>

Resources

Here’s a guide to the MUI Button.

Here’s a guide to styling the Paper component.

import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import Button from "@mui/material/Button";
import Badge from "@mui/material/Badge";
import useMediaQuery from "@mui/material/useMediaQuery";

const responsivePaper = {
  border: "1px solid gray",
  margin: 1,
  flex: { xs: "100%", sm: "calc(50% - 20px)", md: "calc(33% - 20px)" },
  backgroundColor: { xs: "blue", sm: "red", md: "yellow" },
  fontSize: { xs: 16, md: 32 },
};

const responsiveBadge = {
  maxWidth: "max-content",
  "& .MuiBadge-badge": {
    backgroundColor: "gray",
    color: { xs: "yellow", sm: "blue" },
  },
};

const buttonStyleXs = {
  borderColor: "primary.main",
};

const buttonStyleSm = {
  borderColor: "secondary.main",
};

export default function SxBreakpoint() {
  const isXs = useMediaQuery("(max-width:600px)");

  return (
    <Stack direction="column" spacing={2} sx={{ width: "100%" }}>
      <Box sx={{ display: "flex", flexWrap: "wrap" }}>
        <Paper sx={responsivePaper}>One</Paper>
        <Paper sx={responsivePaper}>Two</Paper>
        <Paper sx={responsivePaper}>Three</Paper>
      </Box>
      <Badge sx={responsiveBadge} badgeContent="style!">
        <Button variant="outlined" sx={{marginLeft:2}}>Lovely Button</Button>
      </Badge>
      <Button variant="outlined" sx={isXs ? buttonStyleXs: buttonStyleSm}>
        Responsive
      </Button>
    </Stack>
  );
}

MUI Breakpoints Docs