MUI v5使用makeStyles调用theme时报错无法读取background属性是什么原因

• MUI v5 中 @mui/styles 是遗留的兼容方案，默认不会自动注入全局主题对象。你没有在应用根节点包裹 ThemeProvider 并传入主题实例时，makeStyles 回调函数接收的 theme 参数为 undefined，读取 theme.palette.background 自然会抛出不存在属性的报错。

方案一：使用MUI v5推荐的样式方案（优先选择） #

v5官方主推 styled API 或 sx 属性实现样式，不需要额外安装 @mui/styles，天生支持主题注入，替换示例如下：

// Welcome.js
import { styled } from '@mui/material/styles';

const RootDiv = styled('div')(({ theme }) => ({
  width: "100%",
  maxWidth: 360,
  background: theme.palette.background.default,
}));

export default function Welcome() {
  return <RootDiv>Hello world</RootDiv>;
}

方案二：保留makeStyles用法，补充主题注入 #

如果要继续使用旧的makeStyles写法，需要在应用根节点添加ThemeProvider包裹并传入主题实例，修改App.js代码如下：

// App.js
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Welcome from "./components/Welcome";

// 生成默认主题实例，也可以自定义主题配置传入createTheme
const theme = createTheme();

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

export default App;

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