如何在Material UI 5中正确使用useTheme获取自定义主题配置

正确解决方案 #

前置配置检查

首先确认你已完成MUI 5搭配styled-components的基础配置：

• 已安装@mui/styled-engine-sc替代默认的emotion styled引擎
• 已在打包工具（webpack/vite等）或tsconfig.json中配置别名，将@mui/styled-engine指向@mui/styled-engine-sc

正确使用方式

1. 根组件使用MUI官方的ThemeProvider
   不要用styled-components自带的ThemeProvider，必须从@mui/material/styles导入ThemeProvider和createTheme，传入你自定义的主题配置：

import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

// 自定义你的主题
const myTheme = createTheme({
  palette: {
    mode: 'light',
    primary: {
      main: '#2196f3'
    }
  },
  // 其他主题配置
});

export default function RootApp() {
  return (
    <ThemeProvider theme={myTheme}>
      <CssBaseline />
      {/* 你的业务组件 */}
    </ThemeProvider>
  );
}

2. 子组件中导入useTheme获取主题
   同样从@mui/material/styles导入useTheme，直接调用即可拿到完整的自定义主题：

import { useTheme } from '@mui/material/styles';

function MyComponent() {
  const theme = useTheme();
  // 可直接访问所有主题属性，例如theme.palette.primary.main、theme.typography等
  return <div style={{ color: theme.palette.primary.main }}>测试内容</div>;
}

之前尝试失败的原因说明 #

• @mui/material/styles/useTheme返回默认主题：因为没有用对应@mui/material/styles导出的ThemeProvider包裹根组件，Hook找不到自定义上下文就会返回默认值
• @mui/system/useTheme返回缺失属性的主题：@mui/system是MUI的底层样式系统，它的默认主题仅包含基础样式字段，没有Material Design扩展的palette、typography等属性
• styled-components/useTheme返回undefined：MUI的主题存在自身的上下文中，没有注入到styled-components的默认上下文，所以无法直接读取，如果确实需要用styled-components自带的Hook，可以在根组件同时嵌套一层styled-components的ThemeProvider，把同一个主题对象传入即可。
• 带private-前缀的路径属于MUI内部私有模块，不对外暴露，生产环境使用可能出现不可预期的问题。

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