直接修改 createTheme 的 breakpoints.values 即可，它是 MUI v6 唯一需调整的断点配置项，键为断点别名（如 xs、sm），值为纯数字像素值（如 sm: 640），修改后 Grid、useMediaQuery、sx 等全部自动生效。
直接改 createTheme 的 breakpoints.values 就行，不用动底层文件
Material UI v6（即 MUI v6）的断点系统完全基于主题配置，breakpoints.values 是唯一需要修改的地方。它是一个对象，键是断点别名（如 xs、sm），值是像素数值（单位为 px，不带单位字符串）。改完后所有使用 theme.breakpoints 的组件（比如 Grid、useMediaQuery、Box 的响应式 props）都会自动生效。
常见错误是试图去覆盖 @mui/system 内部的媒体查询逻辑，或手动重写 CSS 类——这不仅无效，还会和主题系统冲突。
- 别改
node_modules/@mui/system/createTheme/createBreakpoints.ts：这是只读构建产物，改了下次安装就丢 - 别在 CSS 中重复写
@media (min-width: ...)：MUI 的响应式工具（如sxprop）依赖主题里的数值生成媒体查询，硬写会导致 JS 和 CSS 断点值不一致 - 别用字符串或带单位的值（如
"600px"）：breakpoints.values.sm必须是纯数字，否则theme.breakpoints.up('sm')会返回错误的媒体查询字符串
breakpoints.values 改哪些字段？优先只动你真要用的
默认值是 { xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536 }。你不需要全量覆盖，只改实际影响布局的那几个。比如要适配小屏安卓设备，把 sm 从 600 改成 640；要加一个超大屏断点，直接加 xxl: 1920 即可。
注意：xs 必须保持为 0，它是所有 min-width 查询的起点，改了会导致 theme.breakpoints.down('sm') 等逻辑错乱。
立即学习“前端免费学习笔记（深入）”；
- 新增断点别名（如
xxl）可以任意命名，但要在组件中显式使用，比如display={{ xxl: 'block' }} - 删掉某个断点（如不用
xl）不会报错，但相关响应式 props 传xl时会 fallback 到最近的有效断点 - 数值必须严格递增，且相邻值至少差 1px（如
sm: 639、md: 640是允许的；sm: 640、md: 640会导致up('sm')和up('md')生成相同媒体查询
如何验证断点是否生效？用 theme.breakpoints 方法现场测
别等渲染完再猜，直接在控制台或组件里调用主题方法看输出：
console.log(theme.breakpoints.up('sm')) // → '@media (min-width:640px)'
console.log(theme.breakpoints.down('md')) // → '@media (max-width:899.98px)'
console.log(theme.breakpoints.between('sm', 'md')) // → '@media (min-width:640px) and (max-width:899.98px)'
这些方法返回的是标准 CSS 媒体查询字符串，也是 MUI 内部实际注入的值。如果返回内容不对，说明主题没正确应用，或者你改的不是当前使用的 theme 实例。
- 确保
ThemeProvider包裹了目标组件，且传入的是你修改后的 theme - 如果用了多个
ThemeProvider嵌套，内层 theme 会覆盖外层，检查层级顺序 -
useMediaQuery接收的参数就是这些字符串，所以测试结果和真实行为一致
搭配 Grid 和 sx 使用时的坑
Grid 的 xs/sm 等 props 和 sx 的响应式语法（如 { display: { xs: 'none', sm: 'block' } }）都依赖 breakpoints.values。但它们对“断点缺失”的处理方式不同：
-
Grid遇到未定义的断点别名（如写了xxl={12}但 theme 里没xxl）会静默忽略该属性，不报错也不生效 -
sx在开发模式下会对未知断点发出警告（Warning: The key \`xxl\` is not a valid breakpoint.），但生产环境不提示，容易漏掉 - 所有断点值参与计算比例（比如
Grid的列宽），所以改md会影响md及之后所有断点的相对位置，不只是md自身
最易被忽略的一点：断点值只影响媒体查询触发时机，不影响布局容器宽度本身。如果你发现某处“断点没切”，先确认是不是内容撑开了父容器导致媒体查询条件未满足，而不是断点配置错了。
