自定义MUI主题断点后，断点简写语法失效问题咨询

问题原因 #

你自定义断点时仅配置了sm、md、lg、xl，但MUI的响应式简写语法依赖主题中完整且匹配的断点集合：

• 默认主题包含xs: 0的断点定义，同时breakpoints.keys默认是['xs','sm','md','lg','xl']
• 你覆盖values后移除了xs，但未同步调整keys，导致样式引擎无法识别简写中的断点映射，因此简写失效
• 而[theme.breakpoints.up('xl')]能正常工作，是因为该方法仅需指定的断点存在即可，不依赖完整的断点顺序集合

解决办法 #

方法1：保留默认断点结构（推荐）

在自定义断点的values中添加xs的定义，保持与默认主题的断点结构一致：

breakpoints: {
  values: {
    xs: 0,
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280
  }
},

添加后，display: { xs: 'none', lg: 'flex' }这类简写即可正常生效。

方法2：自定义完整断点集合（若无需xs）

如果确实不需要xs断点，需同时调整breakpoints.keys，确保与values的键完全对应：

breakpoints: {
  keys: ['sm', 'md', 'lg', 'xl'],
  values: {
    sm: 640,
    md: 768,
    lg: 1024,
    xl: 1280
  }
},

此时简写需使用你自定义的断点键，比如display: { sm: 'none', lg: 'flex' }。

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