How to access theme within a breakpoint attribute in MUI 5?

Question

I need to use my theme.spacing in my sm breakpoints, but no attempt is working.

sx={{
  paddingTop: { sm: 0 },
  paddingRight: { sm: "spacing(6)" },
  paddingBottom: { sm: "spacing(10)" },
  paddingLeft: { sm: "theme.spacing(6)" },
  "@media screen and (orientation:landscape)": {
    paddingTop: { sm: 0 },
    paddingRight: { sm: "spacing(6)" },
    paddingBottom: { sm: "spacing(2)" },
    paddingLeft: { sm: "theme.spacing(6)" },
  },
}}

or this

sx={{
  paddingTop: { sm: 0 },
  paddingRight: { sm: (theme) =>  theme.spacing(6) },
  paddingBottom: { sm: (theme) =>  theme.spacing(10) },
  paddingLeft: { sm: (theme) =>  theme.spacing(6) },
  "@media screen and (orientation:landscape)": {
    paddingTop: { sm: 0 },
    paddingRight: { sm: (theme) =>  theme.spacing(6) },
    paddingBottom: { sm: (theme) =>  theme.spacing(2) },
    paddingLeft: { sm: (theme) =>  theme.spacing(6) },
  },
}}

How can I use theme values with breakpoint (sm, md, lg, etc)

Answer 1

The callback syntax for using the theme is supported on CSS properties (even nested within media queries), but it is not supported as the value for breakpoint keys. The example below shows using the callback syntax at multiple levels -- as the value for a property at the top level (padding), as the value for a media query at the top level (landscape), and as the value for a property specified within a media query (paddingTop within portrait).

import * as React from "react";
import Box from "@mui/material/Box";
import { Theme } from "@mui/material/styles";

export default function SxWithOrientation() {
  return (
    <div>
      <Box
        sx={{
          border: "solid 1px black",
          padding: (theme: Theme) => theme.spacing(5),
          "@media screen and (orientation: landscape)": (theme: Theme) => ({
            color: "black",
            paddingTop: {
              xs: theme.spacing(2.5),
              sm: 3,
              md: 4,
              lg: 5,
              xl: 6
            },
            backgroundColor: {
              xs: "lightgray",
              sm: "lightblue",
              md: "lightgreen",
              lg: "pink",
              xl: "orange"
            }
          }),
          "@media screen and (orientation: portrait)": {
            color: "white",
            paddingTop: (theme: Theme) => ({
              xs: theme.spacing(5.5),
              sm: 4,
              md: 3,
              lg: 2
            }),
            backgroundColor: {
              xs: "black",
              sm: "blue",
              md: "green",
              lg: "red"
            }
          }
        }}
      >
        This box has responsive padding and colors.
      </Box>
    </div>
  );
}

Answer 2

Many of the sx properties are theme aware including the padding so you don't need to use the theme callback to get the theme value:

sx={{
  paddingRight: {
    xs: 0, // theme.spacing(0)
    sm: 3, // theme.spacing(3)
    md: 5, // theme.spacing(5)
  },
}

But for some reasons if you want to use callback (for example to calculate with other values), this is how you can do it:

Normal value

paddingRight: 2,

Normal value with callback

paddingRight: theme => `calc(${theme.spacing(2)} * 10)`,

Breakpoint value

paddingRight: {
  xs: `calc(0px * 10)`,
  sm: `calc(4px * 10)`,
  md: `calc(8px * 10)`,
},

Breakpoint value with callback

paddingRight: (theme) => ({
  xs: `calc(${theme.spacing(0)} * 10)`,
  sm: `calc(${theme.spacing(1)} * 10)`,
  md: `calc(${theme.spacing(2)} * 10)`,
}),

If a lot of your properties need to use the callback:

sx={{
  paddingRight: (theme) => theme.spacing(2),
  margin: (theme) => ({
    xs: theme.spacing(0),
    sm: theme.spacing(2),
  }),
  '& .child': {
    color: (theme) => theme.palette.primary.contrastText,
    bgcolor: (theme) => theme.palette.primary.main,
  },
}}

You can use this trick to simplify them:

sx={{
  '&': (theme) => ({
    paddingRight: theme.spacing(2),
    margin: {
      xs: theme.spacing(0),
      sm: theme.spacing(2),
    },
    '& .child': {
      color: theme.palette.primary.contrastText,
      bgcolor: theme.palette.primary.main,
    },
  }),
}}

Remember when I said something about the properties being theme aware? The code above can be simplified thanks to the tight integration with MUI theme:

sx={{
  pr: 2,
  m: {
    xs: 0,
    sm: 2,
  },
  '& .child': {
    color: 'primary.contrastText',
    bgcolor: 'primary.main',
  },
}}