如何在 MUI 的 sx 属性中实现仅在特定断点生效的样式（.only 行为）

聖光之護 2026-01-19 00:00:00 次阅读

mui 的 `sx` 属性默认支持响应式对象语法（如 `{ xs: 'blue' }`），但该语法等价于 `theme.breakpoints.up()`，即“从该断点起向上生效”。若需严格限定样式**仅在某一断点区间内生效**（类似 `theme.breakpoints.only('sm')`），必须显式调用主题的断点辅助函数。

在 MUI v5+ 中，sx 属性虽原生支持简写式响应式值（例如 sx={{ color: { xs: 'red', md: 'blue' } }}），但其底层逻辑始终基于 theme.breakpoints.up() —— 这意味着 { xs: 'blue' } 实际等效于「屏幕宽度 ≥ xs（即 0px）时应用蓝色」，而非仅在 xs 断点范围内生效。当你需要精准控制样式仅作用于单一断点区间（如仅在 sm：600px–900px），就必须绕过简写语法，转而使用 theme.breakpoints.only() 生成媒体查询选择器，并将其作为 CSS 规则键嵌入 sx。

正确做法是将 sx 设为一个接收 theme 参数的函数，在其中构造带媒体查询的样式对象：

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

 ({
    // 仅在 sm 断点（600px ≤ width < 900px）下生效
    [theme.breakpoints.only('sm')]: {
      backgroundColor: 'blue',
      padding: 2,
      borderRadius: 1,
    },
    // 可同时组合其他断点逻辑，例如仅在 lg 时隐藏
    [theme.breakpoints.only('lg')]: {
      display: 'none',
    },
  })}
>
  This box is blue only on small screens (sm)

⚠️ 注意事项：

theme.breakpoints.only(breakpoint) 返回的是
标准 CSS 媒体查询字符串（如 @media (min-width:600px) and (max-width:899.98px)），因此必须在 sx 函数中动态计算，不可直接写死；
不支持在对象简写语法中混用 .only()，例如 sx={{ backgroundColor: { xs: 'red', [theme.breakpoints.only('sm')]: 'blue' } }} 是非法的——因为 sx 对象键必须是静态字符串，而 theme 在此上下文中不可访问；
若需跨多个断点设置互斥样式，推荐统一使用函数式 sx，避免逻辑碎片化；
所有 theme.breakpoints.* 辅助方法（如 up()、down()、between()、only()）均可在 sx 函数中使用，提供完整媒体查询控制能力。