MUI v5与React项目中Breakpoints失效：应用后页面空白求助

问题根源 #

你使用的@mui/styles是MUI v4的样式方案，在MUI v5环境下它不会自动获取MUI主题对象。当访问theme.breakpoints时，因theme未正确传入会引发CSS语法错误，最终导致页面渲染失败变为空白。另外你在Header中引用了toolbar、search等未在styles.js中定义的样式类，这也会引发样式异常。

修复步骤 #

1. 配置ThemeProvider
   确保项目已安装@mui/material/styles，然后在根组件中添加ThemeProvider，为整个应用提供MUI主题：

// App.js 或其他根组件
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Header from './Header';

const theme = createTheme(); // 使用默认主题，也可自定义配置

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

export default App;

2. 完善styles.js中的样式定义
   补充Header中用到但未定义的样式类，避免样式缺失：

// styles.js
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles((theme) => ({
  toolbar: {
    justifyContent: 'space-between',
  },
  title: {
    display: 'none',
    [theme.breakpoints.up('sm')]: {
      display: 'block',
    },
  },
  search: {
    position: 'relative',
    borderRadius: theme.shape.borderRadius,
    backgroundColor: 'rgba(255,255,255,0.15)',
    '&:hover': {
      backgroundColor: 'rgba(255,255,255,0.25)',
    },
    marginLeft: 0,
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      marginLeft: theme.spacing(1),
      width: 'auto',
    },
  },
  searchIcon: {
    padding: theme.spacing(0, 2),
    height: '100%',
    position: 'absolute',
    pointerEvents: 'none',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inputRoot: {
    color: 'inherit',
  },
  inputInput: {
    padding: theme.spacing(1, 1, 1, 0),
    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
    transition: theme.transitions.create('width'),
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      width: '12ch',
      '&:focus': {
        width: '20ch',
      },
    },
  },
}));

export default useStyles;

3. 可选：迁移到MUI v5原生方案
   如果想完全适配MUI v5，建议放弃@mui/styles，改用官方推荐的sx属性或styled组件，无需额外配置即可直接使用breakpoints：

// 用sx属性改写标题的响应式逻辑
<Typography variant='h5' sx={{ display: { xs: 'none', sm: 'block' } }}>
  Travel Advisor
</Typography>

效果说明 #

完成上述配置后，页面将正常渲染，屏幕宽度大于sm（默认600px）时显示标题，小于该宽度时隐藏标题。

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