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

Question

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?

Answer 1

You cannot change the spacing base value on each breakpoint but you can change the spacing multiplier on each breakpoint:

<Box px={{xs:1, sm:2, md:3}}>
  <Content />
</Box>

Support both margin and padding props

Customize breakpoint value can be done by implement createMuiTheme:

https://material-ui.com/customization/breakpoints/#custom-breakpoints

import { createMuiTheme } from '@material-ui/core/styles';
const theme = createMuiTheme(
   {breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1200,
      xl: 1600,
    },
  })

Answer 2

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