Material UI修改主次颜色报错：createMuiTheme不是函数

嘿，这个问题我之前踩过坑！报错的核心原因要么是导入路径/API名称不对，要么是Material UI版本不匹配，下面给你分情况一步步解决：

情况1：你用的是Material UI v4 #

v4的主题API确实是createMuiTheme和MuiThemeProvider，但你可能犯了两个小错误：

• 导入路径错误：必须从@material-ui/core/styles导入，而非其他路径
• 主题配置格式错误：palette里的primary/secondary需要是包含main属性的对象，不能直接写颜色字符串

正确代码示例：

// 正确导入
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

// 正确配置主题
const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#00bcd4', // 颜色值要放在main字段里
    },
    secondary: {
      main: '#ff4081',
    },
  },
});

// 包裹你的App组件
function Root() {
  return (
    <MuiThemeProvider theme={theme}>
      <App />
    </MuiThemeProvider>
  );
}

// 使用Button时依然可以用primary/secondary属性
<Button primary>主按钮</Button>
<Button secondary>次按钮</Button>

情况2：你用的是Material UI v5（最新版本） #

v5对主题API做了重命名，createMuiTheme改成了createTheme，MuiThemeProvider改成了ThemeProvider，而且包名从@material-ui换成了@mui，这是最容易踩的坑！

正确代码示例：

// 正确导入v5的API
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Button from '@mui/material/Button';

// 主题配置逻辑和v4类似，只是API名称变了
const theme = createTheme({
  palette: {
    primary: {
      main: '#00bcd4',
    },
    secondary: {
      main: '#ff4081',
    },
  },
});

// 用ThemeProvider包裹组件
function Root() {
  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );
}

// v5里Button的用法略有变化，推荐用color属性
<Button variant="contained" color="primary">主按钮</Button>
<Button variant="contained" color="secondary">次按钮</Button>

额外排查点 #

如果你还是报错，检查一下你的package.json：

• 不要同时安装@material-ui/core（v4）和@mui/material（v5），会导致版本冲突
• 确认你安装的版本对应的API文档，避免混用不同版本的代码

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