React+TS+MUI5项目自定义breakpoint未在断点选项中显示如何解决

• 类型声明作用域问题：你将BreakpointOverrides的扩展声明和主题创建代码写在同一业务文件中，该声明仅在当前文件生效，其他组件无法识别自定义的tablet断点类型。
• TS配置未包含类型声明：tsconfig.json的include/typeRoots配置没有覆盖你存放类型扩展的文件，导致编译阶段类型扩展未生效。
• TS服务未更新：修改类型声明后没有重启编辑器的TypeScript语言服务，编辑器缓存了旧的类型定义。

1. 抽离全局类型声明
   在src目录下新建mui.d.ts全局类型文件，单独存放断点扩展声明，不要和业务代码耦合：

declare module "@mui/material/styles" {
  interface BreakpointOverrides {
    xs: true;
    sm: true;
    tablet: true;
    md: true;
    lg: true;
    xl: true;
  }
}

2. 修正tsconfig配置
   检查项目根目录的tsconfig.json，确保include字段包含刚才新建的类型文件：

{
  "compilerOptions": {
    // 其他原有配置保留即可
    "typeRoots": ["node_modules/@types", "src"]
  },
  "include": ["src/**/*"]
}

3. 重启TS服务
   在VSCode中按下快捷键Ctrl+Shift+P（Mac设备为Cmd+Shift+P），搜索并执行TypeScript: Restart TS Server，清除旧的类型缓存。
4. 验证调用写法
   在category组件中使用断点时参考规范写法：

// 在styled样式中使用
const CategoryWrapper = styled('div')(({ theme }) => ({
  display: 'grid',
  gridTemplateColumns: theme.breakpoints.up('tablet') ? 'repeat(3, 1fr)' : 'repeat(2, 1fr)'
}))

// 在hooks中使用
import { useMediaQuery } from '@mui/material'
const isTablet = useMediaQuery(theme => theme.breakpoints.up('tablet'))

如果运行时依然识别不到tablet断点，检查项目中是否存在多次调用createTheme覆盖了断点配置的情况，确保全局只使用你自定义的主题实例。

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