Q:

How to change spacing system based on screen width Material UI?

I am having a component like this
<Box px={3}>
  <Content />
</Box>

Actually when this code is rendered in mobile, there is no problem. But the paddingX still keep equal to 24px (I use 8 base - 8*3=24) when my app is rendered on desktop or bigger screen.
P/s : I tried to modify theme.spacing in theme.js but it seems to be Material UI don't allow us customize spacing based on breakpoints.
So my question is, how can I change spacing system based on screen width?

A:

You can use the mediaQuery hooks that may help you fetch the width i.e. lg, md, sm
 and based on that you can conditionally modify the spacing.
Source: Link to the documentation with example

