升级MUI v5后出现theme.spacing非函数及读取palette.primary报错问题

• 两个报错的本质是makeStyles回调拿到的theme参数不是有效的MUI主题实例，甚至是undefined。
• MUI v5默认采用Emotion作为样式方案，你导入的@mui/styles包是v4遗留的JSS兼容包，本身不默认绑定上层ThemeProvider注入的主题，所以回调无法获取到正确的主题对象。

分两种场景处理：

场景1：兼容现有代码，不想修改原有makeStyles写法 #

只需要修改两处即可：

1. 调整导入路径，将makeStyles改为从@mui/material/styles导入，这个版本的makeStyles已经适配v5的主题注入逻辑：

// 修改前
// import { makeStyles } from "@mui/styles"
// 修改后
import { makeStyles, ThemeProvider, createTheme } from "@mui/material/styles"
import { Theme } from "@mui/material"

2. 确保应用根组件被ThemeProvider包裹，且传入正确的主题对象：

// 项目入口文件
const root = ReactDOM.createRoot(document.getElementById('root')!)
// 可传入自定义主题配置，无自定义需求直接调用createTheme()即可
const theme = createTheme()
root.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
)

原有样式代码和useStyles()调用不需要修改，即可正常运行。

场景2：推荐方案，迁移到v5原生样式方案 #

@mui/styles已经被标记为废弃，后续版本会移除，建议迁移到v5原生的styled API或者sx属性，不需要额外兼容处理，默认即可拿到主题：

用styled API实现 #

import { styled, Avatar } from "@mui/material"

const StyledAvatar = styled(Avatar)(({ theme }) => ({
  width: theme.spacing(3),
  height: theme.spacing(3),
  backgroundColor: theme.palette.primary.light
}))

// 组件内直接使用
<StyledAvatar />

用sx属性实现（更轻量） #

import { Avatar } from "@mui/material"

function MyComponent() {
  return <Avatar 
    sx={{
      width: 3, // sx属性中数字类型的尺寸会自动转换为theme.spacing(对应值)
      height: 3,
      bgcolor: "primary.light" // 直接填写调色板路径字符串即可
    }}
  />
}

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