当在 MUI 主题中自定义 breakpoints.values 时，若遗漏 xs: 0，会导致 display: { xs: 'none', lg: 'flex' } 等响应式简写属性完全失效——即使其他断点（如 sm, lg）定义正确，也必须显式声明 xs 起始值才能启用简写系统。
当在 mui 主题中自定义 `breakpoints.values` 时，若遗漏 `xs: 0`，会导致 `display: { xs: 'none', lg: 'flex' }` 等响应式简写属性完全失效——即使其他断点（如 `sm`, `lg`）定义正确，也必须显式声明 `xs` 起始值才能启用简写系统。
MUI 的响应式简写语法（如 display: { xs: 'none', lg: 'flex' }）依赖于主题中 breakpoints.values 的完整且有序的键集。该系统并非仅读取你显式定义的断点，而是严格按预设键顺序（xs → sm → md → lg → xl）生成 CSS 媒体查询规则。其中 xs 是基础断点，代表最小视口（通常为 0px），是所有后续断点的起始锚点。
当你只定义：
breakpoints: {
values: {
sm: 640,
md: 768,
lg: 1024,
xl: 1280
}
}
MUI 内部会尝试读取 theme.breakpoints.values.xs，但返回 undefined。此时简写解析器无法构建完整的断点映射链，导致整个响应式对象被忽略（静默降级为无样式），而手动使用 theme.breakpoints.up('xl') 等方法仍有效，是因为它们直接调用断点工具函数，不依赖 xs 键的存在。
✅ 正确做法：始终包含 xs: 0，并保持键名与默认顺序一致：
const theme = createTheme({
breakpoints: {
values: {
xs: 0, // 必须！起始基准点
sm: 640, // ≥ 640px
md: 768, // ≥ 768px
lg: 1024, // ≥ 1024px
xl: 1280 // ≥ 1280px
}
}
});
⚠️ 注意事项：
- 不要省略任意默认键（尤其是 xs），即使你不需要 xs 对应的样式；
- 键名必须为 xs/sm/md/lg/xl，大小写敏感，不可替换为 mobile 或 tablet；
- 断点值应为递增整数，否则可能引发媒体查询逻辑错乱；
- 若需扩展断点（如添加 xxl），请确保在 xl 之后追加，并同步更新 breakpoints.keys（高级场景）。
总结：MUI 响应式简写不是“按需解析”，而是基于完整断点契约的编译式系统。xs: 0 是契约的基石——补上它，所有 { xs, sm, md, lg, xl } 简写将立即恢复工作。
