如何在MUI5断点中指定orientation方向并结合sx属性配置样式

实现方案 #

MUI的sx属性支持自定义媒体查询拼接断点规则，你可以用以下两种方式实现需求：

方式1：硬编码断点像素（适合未自定义断点的场景）

MUI默认sm断点阈值为600px，直接写完整媒体查询作为sx的样式键即可：

sx={{
  top: { sm: "30%" },
  // 匹配宽度≥600px且处于横屏状态的场景
  "@media screen and (min-width: 600px) and (orientation:landscape)": {
    top: "10px"
  }
}}

方式2：动态读取断点配置（适合自定义过断点的场景）

通过函数注入theme对象，调用内置的breakpoints.up方法生成断点查询语句，再拼接方向条件，后续修改断点配置无需手动改样式代码：

sx={{
  top: { sm: "30%" },
  [theme => `${theme.breakpoints.up('sm')} and (orientation:landscape)`]: {
    top: "10px"
  }
}}

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