如何在MUI 5的断点属性中访问theme并使用theme.spacing

问题原因 #

• 第一种写法将theme.spacing调用写为字符串格式，MUI的sx属性不会解析执行字符串内的代码，因此不生效。
• 第二种写法回调函数的层级错误，sx仅支持在样式属性的层级传入回调获取theme实例，不支持在断点对象的属性值位置嵌套回调函数。

正确实现方式 #

写法1（推荐）：整个sx对象用回调接收theme参数 #

直接在最外层拿到theme实例，内部所有断点配置都可以直接调用theme的相关属性和方法，代码更简洁：

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

写法2：单个样式属性用回调返回断点对象 #

适合仅少量属性需要用到theme的场景：

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

以上两种写法都可以实现在sm、md、lg等断点中调用theme相关值的需求。

内容的提问来源于stack exchange，提问作者bonum_cete