React项目使用Material UI v5出现theme.spacing不是函数报错如何解决

报错诱因 #

• 导入来源错误：当前makeStyles从已废弃的旧版包@material-ui/styles导入，该包在MUI v5中不会自动绑定MUI主题，回调函数接收到的theme是空白对象，不存在spacing方法。
• 版本体系不匹配：其余MUI组件均从v5标准包@mui/material导入，和旧版@material-ui/styles的主题体系完全隔离，无法共享全局主题配置。
• 若你已经替换了正确的makeStyles导入仍报错，说明应用根节点未用ThemeProvider包裹并传入主题，makeStyles无法获取到初始化的主题实例。

修复方案 #

方案1：使用MUI v5官方推荐的sx属性（优先选择） #

MUI v5默认使用emotion作为css-in-js方案，makeStyles已进入维护模式，直接使用sx属性可以天然访问主题对象，无需额外配置：

// 直接删除原有的useStyles定义，修改组件返回部分即可
const Layout = ({ children }) => {
  const history = useHistory();
  const location = useLocation();

  const menuItems = [
    {
      text: "My Notes",
      icon: <SubjectOutlined color="secondary" />,
      path: "/",
    },
    {
      text: "Create Note",
      icon: <AddCircleOutlineOutlined color="secondary" />,
      path: "/create",
    },
  ];

  return (
    <div sx={{ display: "flex" }}>
      <div 
        sx={{
          background: "#f9f9f9",
          width: "100%",
          padding: (theme) => theme.spacing(3),
        }}
      >
        {children}
      </div>
    </div>
  );
};

方案2：兼容旧写法继续使用makeStyles #

1. 安装v5版本的样式依赖包：

npm install @mui/styles @emotion/react @emotion/styled

2. 替换makeStyles的导入路径：

// 移除旧导入 import { makeStyles } from "@material-ui/styles";
import { makeStyles } from "@mui/styles";

3. 确保应用根节点已用ThemeProvider包裹并传入初始化的主题：

// 示例：入口文件index.js配置
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import Layout from './Layout';

const theme = createTheme(); // 可自定义主题参数

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <Layout />
  </ThemeProvider>
);

完成以上配置后，makeStyles回调即可正常拿到包含spacing方法的主题对象。

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