How to use breakpoints from MUI?

Question

I want to make my project responsive by using MUI breakpoints, but I don't get how to use them in a simple way, I think creating a const styles as they explained in their documents is not a simple and handy way for beginners! I'd appreciate if you have any information about this topic to share with me.

Overlie

Answer 1

Pass the breakpoints to the sx prop.

<Div
  sx={{ backgroundColor: { xs: "red", md: "green", lg: "blue" }, }}
>
  //CODE
</Div>

Note : Material UI is a mobile-first component library. Write code for mobile devices first, and then scale up the components.

Leclair

Answer 2

A deeper dive into the MUI's semantics of the "sx" prop is required to answer this question. Every property of the MUI component “sx” prop can be set directly or through a callback function.

1. Using the value in property

Firstly, the value can be set directly. For example, if we need to use the specific property of “sx” prop such as padding it can be done easily just need to add “p” with a number. Often, the value of the pixel to calculate spacing is equal to 8 pixels.

<Box
  sx={{
    p: 1
  }}
/>

2. Using callback function in property

In a second way, the value can be set as a callback function, that has a theme as an argument, that is provided everything is related to the “theme context”. The “theme” object before that by the “ThemeProvider” is provided and can be available in the nested components.

<ThemeProvider theme={theme}>
  <Provider store={store}>
    <CssBaseline />
    <BrowserRouter>
      <RTL>
        <App />
      </RTL>
    </BrowserRouter>
  </Provider>
</ThemeProvider>

This is the shorthand to use the theme without handling lots of logic when it can be done only by the callback. So the component is remained as a dump or presented component without engaging with business logic. In this example, the spacing is manually calculated by using the “theme” object. This instance is similar to the previous example that is provided in the first way to set the 18px as padding to the “Box” Component.

<Box
  sx={{
    padding: (theme) => theme.spacing(1),
  }}
/>

For using the spacing of the utility function of the “theme” object without using the callback function, it is necessary to use the “useTheme” hooks for access to that.

const SampleComponent = () => {
  const theme = useTheme();

  return (
    <Box
      sx={{
        p: theme.spacing(1),
      }}
    />
  );
};

That is obvious, using the "useTheme" in a presented component is not a good choice when another option like the theme inside the "sx" prop is on the table.

3. Using callback function as the main value

In contrast with the previous ways, there is another way to access "theme" by setting the main "sx" prop value that is the object via a callback function. Similar to the second way the theme can be accessed when a callback function is defined in the value of the "sx" prop.

<Box
  sx={(theme) => ({
    color: theme.palette.primary.main,
    bgColor: theme.palette.grey.A100,
  })}
/>

In this example, the goal is to access the palette values with the “theme” object that can be available in the whole “sx” object value. Until here, the main point for using the “theme” object in the "sx" prop can be understood. Additionally, using that in complex cases like using a specific style for multiple breakpoints is more sensible.

const SampleComponent = () => {
  const theme = useTheme();
  const onlySmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
  const onlyMediumScreen = useMediaQuery(theme.breakpoints.down("md"));
  const onlyLargeScreen = useMediaQuery(theme.breakpoints.down("md"));

  return (
    <Box
      sx={{
        p: onlySmallScreen ? 2 : onlyMediumScreen ? 4 : onlyLargeScreen ? 6 : 1,
      }}
    />
  );
};

In the example, the goal is to change padding by a variety of breakpoints. As shown, the logic is taken into place in this Component when it truly is not necessary to use any logic here. The example can be rewritten as a full presented component without engaging in logic.

const SampleComponent = () => (
  <Box
    sx={(theme) => ({
      p: 1,
      [theme.breakpoints.down("sm")]: {
        p: 2,
      },
      [theme.breakpoints.down("md")]: {
        p: 2,
      },
      [theme.breakpoints.down("lg")]: {
        p: 2,
      }
    })}
  />
);

This Code is rewritten into a sample code without any logic in it.

The phrase “p: 1” is fallback padding when the current device width is not suitable or is not in the determined ranges.

It must be taken into account, every benefit can have a downside also and there are some limitations to choosing the use of this method:

• The breakpoints as a "sx" callback function value, can not be passed to a HOC component that is defined before.

• When another prop of MUI component needs to know when breakpoints are changed, there is no way to pass a Boolean value by using the theme => theme.breakpoints.down(“sm”). It is done by setting the useMedaQuery value in that prop.

const theme = useTheme();
const onlySmallScreen = theme.breakpoints.down("sm");

<Dialog open={true} fullScreen={onlySmallScreen} />;

Amalbergas

Thanks for this answer wasn't aware of the callback - this made my migration so much easier! – Coil