我正在使用typescript和断点MaterialUI，我认为您需要导入和修改一些接口，如文档所述（https：//material-ui.com/guides/typescript/# customization-of-theme）。例如，我有一个Theme.tsx，如下所示：

import { createMuiTheme } from '@material-ui/core/styles'
import {BreakpointOverrides} from "@material-ui/core/styles/createBreakpoints"

declare module "@material-ui/core/styles/createBreakpoints" {
  interface BreakpointOverrides {
    xs: false; // removes the `xs` breakpoint
    sm: false;
    md: false;
    lg: false;
    xl: false;
    tablet: true; // adds the `tablet` breakpoint
    laptop: true;
    desktop: true;
  }
}

declare module '@material-ui/core/styles/createMuiTheme' {
  interface Theme {
    appDrawer: {
      width: React.CSSProperties['width']
      breakpoint: BreakpointOverrides
    }
  }
  // allow configuration using `createMuiTheme`
  interface ThemeOptions {
    appDrawer?: {
      width?: React.CSSProperties['width']
      breakpoint?: BreakpointOverrides
    }
  }
}
export const theme = createMuiTheme({
  breakpoints: {
    values: {
      tablet: 400,
      laptop: 900,
      desktop: 1200
    }
  },})

我发现问题是由于material-ui的版本。4.9.9版本的@material-ui/core会导致错误信息。当我更新到4.11.0时，它可以正常工作。

我一直在努力解决这个问题，但我想我已经找到了一种使用ThemeOptions全局更改/自定义断点的有效方法。

//themeOptions.ts
import { ThemeOptions } from "@mui/material/styles/createTheme";

declare module "@mui/material/styles" {
  interface BreakpointOverrides {
    xs: false; // removes the `xs` breakpoint
    sm: false;
    md: false;
    lg: false;
    xl: false;
    mobile: true; // adds the `mobile` breakpoint
    tablet: true;
    desktop: true;
  }
}

export const themeOptions: ThemeOptions = {
  breakpoints: {
    values: {
      mobile: 0,
      tablet: 650,
      desktop: 1200
    }
  }
};

//demo.tsx
import { useTheme, useMediaQuery } from "@mui/material";
export default const Demo = () => {
  const theme = useTheme();
  const mobile = useMediaQuery(theme.breakpoints.down("mobile"));
  const mobileContent: JSX.Element = (<Box sx={{ bg: {mobile: "#000"}, color: "#fff" }}> Mui breakpoint mobile</box>);
  
  const otherContent: JSX.Element = (<Box sx={{ bg: {tablet: "#fff"}, color: "red" }}> Mui breakpoint not mobile</box>);
  
  return {mobile ? mobileContent : otherContent}
}

//app.tsx
import * as React from "react";
import ReactDOM from "react-dom";
import { createTheme, ThemeProvider, } from "@mui/material";
import { themeOptions } from "./themeOptions";
import Demo from "./demo";

const App = () => {
  <ThemeProvider theme={createTheme(themeOptions)}>
    <Demo/>
  </ThemeProvider>
}
const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <CssBaseline />
      <App/>
  </React.StrictMode>,
  rootElement
);