如何解决MUI useMediaQuery与断点的TypeScript类型错误问题？

1. 检查自定义断点的类型声明文件 #

创建或修改src/mui.d.ts（或其他TypeScript能识别的声明文件），确保正确覆盖BreakpointOverrides：

import { BreakpointOverrides } from '@mui/material/styles';

declare module '@mui/material/styles' {
  interface BreakpointOverrides {
    // 可选：禁用不需要的默认断点
    xs: false;
    sm: false;
    md: false;
    lg: false;
    xl: false;
    // 添加你的自定义断点
    mobile: true;
    tablet: true;
    desktop: true;
  }
}

2. 确保TypeScript识别声明文件 #

打开tsconfig.json，确认声明文件被包含在编译范围内：

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./src"],
    "include": ["src/**/*"]
  }
}

如果你的声明文件在src/types目录下，把./src/types加入typeRoots即可。

3. 验证主题配置的断点定义 #

确认createTheme中正确配置了断点的数值：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  breakpoints: {
    values: {
      mobile: 0,
      tablet: 640,
      desktop: 1024,
    },
  },
});

export default theme;

4. 组件中正确导入并使用 #

确保组件中导入的是MUI的useTheme和useMediaQuery：

import { useTheme, useMediaQuery } from '@mui/material/styles';

const YourComponent = () => {
  const theme = useTheme();
  const isDesktop = useMediaQuery(theme.breakpoints.up('desktop'));

  return (
    <div>
      {isDesktop ? '当前为桌面端视图' : '当前为移动端/平板端视图'}
    </div>
  );
};

export default YourComponent;

常见排查点 #

• 若仍报错，检查是否存在多个声明文件冲突，比如重复定义了@mui/material/styles模块
• 重启TypeScript语言服务（VSCode中可按Ctrl+Shift+P，选择"TypeScript: Restart TS Server"）
• 确认所有依赖版本一致，避免MUI核心包与类型包版本不匹配

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