Search code examples
material-uiresponsive-designbreakpointsresponsiveness

How to use breakpoints from MUI?

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.

Solution

  • 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.