如何在Material UI中添加自定义主题？配置后不生效求解

你的自定义主题不生效的核心原因是拼写错误：在createTheme配置里，你把palette（调色板）拼成了pallette，多了一个字母l。Material UI的主题配置属性是palette，拼写错误会导致整个配色配置被忽略，自然不会应用自定义主题。

修正后的完整代码 #

import React from "react";
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
import ApplyPage from "./pages/Home/Home";
import SubmitPage from "./pages/submit/submit";
import StatusPage from "./pages/status/status";
import NotificationPanel from "./pages/notification/NotificationPanel";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import ProfilePage from "./pages/profile/Profile";

function App() {
  const theme = createTheme({
    // 修正拼写：pallette → palette
    palette: {
      primary: {
        main: "#2A9D8F",
      },
      secondary: {
        main: "#264653",
      },
    },
  });

  return (
    <Router>
      <ThemeProvider theme={theme}>
        <Routes>
          <Route path="/" element={<ApplyPage />} />
          <Route path="/submit" element={<SubmitPage />} />
          <Route path="/status" element={<StatusPage />} />
          <Route path="/notification" element={<NotificationPanel />} />
          <Route path="/profile" element={<ProfilePage />} />
        </Routes>
      </ThemeProvider>
    </Router>
  );
}

export default App;

额外验证步骤 #

确保你的组件正确使用了主题配色：

• 对于Material UI自带组件，直接使用color="primary"或color="secondary"属性，比如<Button color="primary">按钮</Button>
• 如果需要手动获取主题颜色，可以通过useTheme钩子：

  import { useTheme } from "@mui/material/styles";
  
  function MyComponent() {
    const theme = useTheme();
    return <div style={{ color: theme.palette.primary.main }}>自定义颜色文本</div>;
  }
  

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