使用MUI ThemeProvider修改主色时出现TypeError错误求助

问题根源 #

你当前从@mui/system导入的createTheme和ThemeProvider是MUI的轻量主题系统，不包含Material组件（比如Paper）所需的完整主题结构，组件读取主题属性时自然会出现undefined报错。

仅修改主色的正确操作 #

不需要设置所有主题值，只需要换对导入来源，用@mui/material包提供的主题工具即可——它会自动继承所有默认主题配置，你只需要覆盖要修改的主色：

修改后的代码：

import { createTheme, ThemeProvider } from "@mui/material/styles"; // 修正导入来源
import "./App.css";
import IntegrationsPage from "./pages/integrations/IntegrationsPage";

function App() {
  const theme = createTheme({
    palette: {
      primary: {
        main: "#4B68FE",
      }
    }
  });

  return (
    <div className="App">
      <ThemeProvider theme={theme}>
        <IntegrationsPage/>
      </ThemeProvider>
    </div>
  );
}

export default App;

为什么这样可行 #

@mui/material/styles里的createTheme会生成包含所有默认主题值的完整对象，你只需要在配置对象里定义要修改的部分（比如这里的primary.main），未定义的属性会自动使用MUI的默认值，不会出现缺失属性的报错。

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