如何在MUI的sx属性中实现theme.breakpoints.only断点效果？

方法一：直接在sx回调中使用theme.breakpoints.only #

sx属性支持接收一个以theme为参数的函数，你可以直接调用theme.breakpoints.only生成对应媒体查询，绑定目标样式：

import Box from '@mui/material/Box';

<Box
  sx={(theme) => ({
    // 仅在xs断点区间内应用蓝色背景
    [theme.breakpoints.only('xs')]: {
      background: 'blue',
    },
    // 仅在sm断点区间内应用红色背景
    [theme.breakpoints.only('sm')]: {
      background: 'red',
    },
  })}
>
  示例内容
</Box>

这种方式和你之前使用theme.breakpoints.only的逻辑完全一致，直接复用MUI内置的断点计算逻辑，迁移成本低。

方法二：用breakpoints.between模拟only效果 #

breakpoints.only(断点)本质等价于breakpoints.between(断点, 下一级断点)，你可以通过这个方法生成相同的媒体查询范围：

<Box
  sx={(theme) => ({
    // 仅在xs断点区间（0px 至 sm断点的上限）生效
    [theme.breakpoints.between('xs', 'sm')]: {
      background: 'blue',
    },
  })}
>
  示例内容
</Box>

如果你的项目自定义了断点配置，这种方式会自动适配自定义的断点区间，无需手动写死像素值。

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