如何在MUI主题中实现不同palette并保留相同组件覆盖配置

你可以通过提取公共主题配置的方式避免重复代码，MUI的createTheme支持传入基础配置并扩展，这样就能让明暗主题共享typography、components等非palette配置，只在各自的主题中定义不同的palette即可。

实现步骤： #

• 提取公共主题配置：把typography、components这些不需要随模式变化的部分单独抽离
• 基于公共配置创建明暗主题：分别为light和dark模式定义专属palette，再与公共配置合并传入createTheme
• 实现切换逻辑：用状态管理当前模式，动态切换ThemeProvider的theme属性

修改后的代码示例： #

import { createTheme, ThemeProvider } from "@mui/material/styles";
import { useState } from "react";

// 公共主题配置：typography、components等不随模式变化的部分
const baseThemeConfig = {
  typography: {
    fontFamily:
      '"Ubuntu", "Segoe UI", "Roboto", "Droid Sans", "Helvetica",  "Arial", sans-serif',
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: `
        .hidden {
          display: none;
          visibility: hidden;
        }
        .json {
          width: 34vw;
          min-width: 400px;
          max-width: 800px;
          height: 40vh;
          min-height: 100px;
          max-height: 450px;
          overflow: scroll;
        }
      `,
    },
  },
};

// Light模式主题：合并公共配置 + light palette
export const lightTheme = createTheme({
  ...baseThemeConfig,
  palette: {
    mode: "light",
    neutral: {
      main: "#72ccda",
      one: "#ffffff",
      two: "#f5f5f5",
    },
    primary: {
      main: "#72ccda",
      one: "#9edce5",
      two: "#72ccda",
    },
    info: {
      main: "#72ccda",
      one: "#9edce5",
      two: "#72ccda",
    },
  },
});

// Dark模式主题：合并公共配置 + dark palette
export const darkTheme = createTheme({
  ...baseThemeConfig,
  palette: {
    mode: "dark",
    neutral: {
      main: "#72ccda",
      one: "#ffffff",
      two: "#f5f5f5",
    },
    primary: {
      main: "#72ccda",
      one: "#9edce5",
      two: "#72ccda",
    },
    info: {
      main: "#34afc2",
      one: "#9edce5",
      two: "#72ccda",
    },
  },
});

// 示例：根组件中实现模式切换逻辑
function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  return (
    <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
      {/* 你的应用内容 */}
      <button onClick={() => setIsDarkMode(!isDarkMode)}>
        切换{isDarkMode ? "浅色" : "深色"}模式
      </button>
    </ThemeProvider>
  );
}

export default App;

关键说明： #

• 用扩展运算符...baseThemeConfig将公共配置合并到每个主题中，确保typography、components等配置在明暗模式下完全一致
• 仅在各自主题的palette中定义模式差异，完全满足"切换仅影响palette颜色"的需求
• 后续修改公共配置时，只需调整baseThemeConfig，两个主题会自动同步更新

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