React中Material UI v6默认主题获取及makeStyles报错求助

错误原因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'getContrastText')，是因为@mui/styles（MUI的遗留样式方案）需要通过ThemeProvider提供主题上下文，而你的应用未配置主题提供者，导致makeStyles回调里的theme参数为undefined。

解决方案步骤 #

1. 确认依赖安装完整 #

先确保已安装MUI v6相关核心依赖：

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

2. 配置主题与ThemeProvider #

修改index.js，导入主题工具并为应用包裹主题提供者：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
// 导入主题相关组件
import { createTheme, ThemeProvider } from '@mui/material/styles';

// 创建默认主题（可自定义配置）
const theme = createTheme();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 用ThemeProvider包裹整个应用，注入主题上下文 */}
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

3. 恢复makeStyles的正常使用 #

配置完成后，你的styles.js和List.jsx无需额外修改，makeStyles会自动从主题上下文获取theme参数，报错即可解决。

如果需要自定义主题，可在createTheme中扩展配置：

const theme = createTheme({
  palette: {
    secondary: {
      main: '#dc004e',
    },
  },
});

可选：迁移到MUI v6推荐的样式方案 #

MUI v6官方更推荐使用styled组件或sx属性替代makeStyles，适配v6的Emotion核心样式体系，示例如下：

用styled组件重写样式逻辑：

import { styled } from '@mui/material/styles';
import { Avatar } from '@mui/material';
import { red } from '@mui/material/colors';

export const AvatarExpense = styled(Avatar)(({ theme }) => ({
  color: theme.palette.getContrastText(red[500]),
  backgroundColor: red[500],
}));

在组件中直接使用：

import React from 'react';
import { AvatarExpense } from './styles';

const List = () => {
  return (
    <AvatarExpense>E</AvatarExpense>
  );
};

关键说明 #

• @mui/styles是MUI为兼容v4保留的遗留包，v6核心样式基于Emotion实现，优先使用styled或sx能更好适配v6特性。
• 所有依赖主题的样式逻辑，必须在ThemeProvider包裹的上下文环境中运行，否则会因无法获取theme参数报错。

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