最新版Material UI使用makeStyles时breakpoints相关报错如何解决

错误原因梳理 #

• 第一个报错Property 'breakpoints' does not exist on type 'DefaultTheme'：@mui/styles包导出的makeStyles默认使用的DefaultTheme类型不包含MUI完整的主题属性，TS无法识别breakpoints字段。
• 第二个报错TypeError: Cannot read properties of undefined (reading 'up')：仅添加类型注解没有解决运行时问题，独立的@mui/styles包没有和MUI的ThemeProvider注入的主题实例绑定，导致运行时拿到的theme为undefined。

解决方案 #

方案1：修复现有makeStyles用法 #

1. 替换导入路径，从@mui/material/styles导出绑定了MUI主题的makeStyles和Theme类型，无需单独从@mui/system导入Theme：

// 替换原有导入
import { makeStyles, Theme } from '@mui/material/styles';

2. 给makeStyles的回调参数添加Theme类型注解，也可以显式指定泛型：

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    [theme.breakpoints.up(ResponsiveConstants.mobileBreakpoint)]: {
      minHeight: 600,
    },
  },
}));

3. 确保应用根组件外层已经包裹ThemeProvider，并传入createTheme生成的主题实例：

// 根组件示例
import { ThemeProvider, createTheme } from '@mui/material/styles';
import ResponsiveContainerGrid from './ResponsiveContainerGrid';

// 可自定义断点等主题配置
const theme = createTheme();

function App() {
  return (
    <ThemeProvider theme={theme}>
      <ResponsiveContainerGrid />
    </ThemeProvider>
  );
}

方案2：使用MUI v5推荐的新式API（更稳定，无额外配置） #

makeStyles在MUI v5中已经被标记为遗留API，更推荐使用styled组件或者sx属性实现样式，天然支持主题注入，不会出现上述问题。

使用styled实现：

import { Grid, styled } from "@mui/material";
import { FC } from "react";
import ResponsiveConstants from "./ResponsiveConstants";

const StyledGrid = styled(Grid)(({ theme }) => ({
  [theme.breakpoints.up(ResponsiveConstants.mobileBreakpoint)]: {
    minHeight: 600,
  }
}));

const ResponsiveContainerGrid: FC = ({ children }) => {
  return (
    <div>
      <StyledGrid
        container
        direction="row"
        justifyContent="center"
        alignItems="center"
      >
        {children}
      </StyledGrid>
    </div>
  );
};

export default ResponsiveContainerGrid;

使用sx属性实现（更简洁）：

import { Grid } from "@mui/material";
import { FC } from "react";
import ResponsiveConstants from "./ResponsiveConstants";

const ResponsiveContainerGrid: FC = ({ children }) => {
  return (
    <div>
      <Grid
        container
        direction="row"
        justifyContent="center"
        alignItems="center"
        sx={{
          [theme => theme.breakpoints.up(ResponsiveConstants.mobileBreakpoint)]: {
            minHeight: 600
          }
        }}
      >
        {children}
      </Grid>
    </div>
  );
};

export default ResponsiveContainerGrid;

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