MUI createTheme未正确将自定义主题传递给MUI组件问题求助

问题根因 #

你遇到的是MUI v5非常典型的配置错误，共有两处：

• 错误导入ThemeProvider：你从@mui/styles导入的是适配旧版JSS样式的遗留Provider，无法让MUI原生组件识别自定义主题，正确导入路径为@mui/material/styles
• Provider嵌套顺序错误：StyledEngineProvider必须放在ThemeProvider外层，才能保证自定义样式优先级正确生效

修正后的index.tsx代码

import React from "react";
import ReactDOM from "react-dom";
import AppbarTop from "./AppbarTop";
import { Router } from "react-router";
import { createBrowserHistory } from "history";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import { LocalizationProvider } from "@mui/lab";
// 统一从@mui/material/styles导入两个Provider
import { createTheme, ThemeProvider, StyledEngineProvider } from "@mui/material/styles";

const customHistory = createBrowserHistory();

const theme = createTheme({
  palette: {
    primary: {
      main: "#242526"
    },
    secondary: {
      main: "#d975d0"
    },
    text: {
      primary: "#E4E6EB",
      secondary: "#B0B3B8"
    },
    background: {
      default: "#242526",
      paper: "#242526"
    }
  }
});

ReactDOM.render(
  <React.StrictMode>
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Router history={customHistory}>
        {/* 调整顺序：StyledEngineProvider放在外层 */}
        <StyledEngineProvider injectFirst>
          <ThemeProvider theme={theme}>
            <AppbarTop />
          </ThemeProvider>
        </StyledEngineProvider>
      </Router>
    </LocalizationProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

可选优化（Appbar.tsx调整）

如果你希望顶部的Dashboard按钮也自动匹配主题色，给Button组件添加color属性即可，无需额外写自定义样式：

<Button
  id="basic-button"
  color="primary" // 新增这一行即可自动应用主题primary配色
  aria-controls="basic-menu"
  aria-haspopup="true"
  aria-expanded={open ? "true" : undefined}
  onClick={handleClick}
>
  Dashboard
</Button>

修正后Menu组件会自动读取你主题中配置的background.paper属性，背景色会自动匹配Appbar的深色主题。

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