Make theme.breakpoints function to take a delta

Quick to the point

Could be a nice feature if functions inside the theme.breakpoints take a delta? So: if my “lg” is at “1024px” calling theme.breakpoints.up('lg', -10) will means “1014”?

My usecase

I’m building a layout where I’m controlling offcanvas icon to “move-in” from a certain resolution.

Let me attach a demo gif to better explain the issue

I’m applying a style like the following:

  stickyToolbar: {
    position: 'fixed',
    right: theme.spacing(-5),
    // ...
    [theme.breakpoints.up('lg')]: {
      right: theme.spacing(1),
    },
    transition: 'right 300ms ease-in',
  },

So: my scope is to keep button offcanvas until the main content stop expading so we have enough external space to keep it (so at lg size and up).

The small issue I’ve. The media-query start applying at lg, but I don’t have enough space at “lg+1px” to host the whole button.

I can obviously wite the mediaquery myself manually, but this will be less dynamic in case I need to change default theme settings.

---

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

[merceyz]

Wow! I was not aware that theme.breakpoints.up and similar functions can receive a number. This seems not documented at https://material-ui.com/customization/breakpoints/

The TypeScript type definitions specify it here, so if you’re using an editor like VSCode it should show that to you https://github.com/mui-org/material-ui/blob/14bbd57c5fe1d9be367fe3ccfdc84736d511f094/packages/material-ui/src/styles/createBreakpoints.d.ts#L8-L9

Something like [theme.breakpoints.up(theme.breakpoints.values.lg + (props => (props.foo ? 10 : 20)))] seems not supported.

Here is a way to control it dynamically using props

stickyToolbar: props => ({
  position: "fixed",
  right: theme.spacing(-5),
  // ...
  [theme.breakpoints.up(theme.breakpoints.values.lg + props.foo ? 10 : 20)]: {
    right: theme.spacing(1)
  },
  transition: "right 300ms ease-in"
})

[merceyz]

It would only work in JS when directly accessing the theme in makeStyles and withStyles