Material UI v5 React组件中自定义主题值不生效问题排查

配置了MUI自定义主题但无法生效，已按步骤操作且确认配置无误，将backgroundColor="primary"替换为backgroundColor="red"能正常生效，说明问题出在自定义主题的使用或配置环节。

依赖版本（package.json） #

"dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.11.0",
    "@mui/material": "^5.11.1"
}

App组件代码 #

import { theme } from "./theme"
import { ThemeProvider } from "@mui/material/styles"

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Box>
        <Router>
          <Header />
          <Container>
            <Routes>
              <Route path="/" element={<NotesTable />} />
              <Route path="/my-notes" element={<MyNotes />} />
              <Route path="/notes/:noteId" element={<Note />} />
              <Route
                path="/create-note"
                element={<CreateNote key={window.location.pathname} />}
              />
              <Route path="/edit/:noteId" element={<CreateNote />} />
              <Route path="*" element={<NotFound />} />
            </Routes>
          </Container>
        </Router>
        <ToastContainer />
      </Box>
    </ThemeProvider>
  )
}

失效的组件代码片段 #

<Stack
  direction="row"
  justifyContent="space-between"
  alignItems="center"
  backgroundColor="primary"
  sx={{ height: "70px" }}
>
  <div onClick={redirectHome} className="logo">
    GIT NOTES
  </div>
  <div className="top-right">
    {location.pathname === "/" && <SearchBar />}
    {user ? (
      <AccountMenu />
    ) : (
      <div className="secondary-button">
        <a href={GITHUB_LOGIN_URL}>Login</a>
      </div>
    )}
  </div>
</Stack>

自定义主题代码 #

import { createTheme } from "@mui/material"
import { red } from "@mui/material/colors"

export const theme = createTheme({
  palette: {
    primary: {
      main: red[200],
      light: "#bdead9",
    },
    secondary: {
      main: "#35a77d",
    },
  },
})

可能的原因及解决方法 #

1. 错误的颜色引用方式
   直接在组件属性中写backgroundColor="primary"是错误的，MUI不会将其解析为主题颜色。正确的做法是通过sx属性引用主题调色板：

   <Stack
     // ...其他属性
     sx={{ 
       height: "70px",
       backgroundColor: 'primary.main' // 或使用回调函数：theme => theme.palette.primary.main
     }}
   >
   

2. 主题覆盖问题
   检查Header组件内部是否嵌套了其他ThemeProvider，如果有，会覆盖外层的自定义主题，导致颜色不生效。

3. 缓存或依赖问题
   尝试删除node_modules和package-lock.json，重新执行npm install，清除可能的依赖缓存问题。

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