如何让Material UI主题同时适配React类组件与函数组件？

核心原因 #

你当前混用了Material UI v4（@material-ui/core）和v5（@mui/material）的ThemeProvider，两个版本的主题上下文完全独立，导致类组件和函数组件只能有一方能正确获取到主题配置。

两种可行解决方案 #

方案1：保持使用Material UI v4 #

如果项目仍基于v4开发，确保所有主题相关的导入都统一来自@material-ui/core/styles：

1. 顶层App.js的导入和主题定义保持不变：

   import { ThemeProvider, withStyles, createTheme } from '@material-ui/core/styles';
   import zhCN from '@material-ui/core/locale/zhCN';
   import { red, amber } from '@material-ui/core/colors';
   
   render() {
     const theme = createTheme({
       palette: {
         primary: { main: '#23A455', contrastText: '#000000' },
         secondary: { main: '#7c22a3', contrastText: '#ffffff' },
         failure: { main: red[300], subtle: red[100], hover: red[200] },
         disease: { main: amber[300], subtle: amber[100], hover: amber[200] }
       }
     }, zhCN);
     // ... 其余渲染逻辑
   }
   

2. 函数组件中使用v4版本的useTheme钩子：

   import { useTheme } from '@material-ui/core/styles';
   
   function MyFunctionalComponent() {
     const theme = useTheme();
     return <div style={{ color: theme.palette.primary.main }}>测试内容</div>;
   }
   

3. 类组件的withStyles用法保持原有方式即可，类组件和函数组件会共享同一个v4主题上下文。

方案2：升级到Material UI v5并统一适配 #

如果计划迁移到v5，需要统一所有组件的导入路径，并调整类组件的适配方式：

1. 顶层App.js替换为v5的主题相关导入：

   import { ThemeProvider, createTheme } from '@mui/material/styles';
   import zhCN from '@mui/material/locale/zhCN';
   import { red, amber } from '@mui/material/colors';
   
   render() {
     const theme = createTheme({
       palette: {
         primary: { main: '#23A455', contrastText: '#000000' },
         secondary: { main: '#7c22a3', contrastText: '#ffffff' },
         failure: { main: red[300], subtle: red[100], hover: red[200] },
         disease: { main: amber[300], subtle: amber[100], hover: amber[200] }
       }
     }, zhCN);
     // ... 其余渲染逻辑
   }
   

2. 类组件适配v5的withStyles：v5中withStyles迁移到了@mui/styles包，需调整导入：

   import { withStyles } from '@mui/styles';
   
   const styles = theme => ({
     media: { maxWidth: '100%' },
     // 其余样式定义
   });
   
   export default withTranslation()(withStyles(styles, { withTheme: true })(ComponentName));
   

3. 函数组件使用v5的useTheme钩子：

   import { useTheme } from '@mui/material/styles';
   
   function MyFunctionalComponent() {
     const theme = useTheme();
     return <div sx={{ color: theme.palette.primary.main }}>测试内容</div>;
   }
   

重要注意事项 #

• 禁止同时使用v4和v5的ThemeProvider，两者的主题上下文完全隔离，无法共享配置。
• 若进行v4到v5的升级，建议逐步替换组件的导入路径，避免混用导致的兼容性问题。
• v5中推荐使用sx属性或styled API替代withStyles，但为了兼容旧类组件，@mui/styles包可继续提供withStyles支持。

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