如何在Material UI（React）中合并覆盖：重写主题与组件样式

通常问题出在你手动合并主题对象时破坏了嵌套结构，导致调色板等全局配置被覆盖。核心解决思路是利用Material UI的createTheme内置的深层合并能力，而非手动做对象层级的简单覆盖。

错误示例（导致调色板失效） #

如果你的代码是分开创建主题再用展开/assign合并，就会出现顶层属性被覆盖的问题：

// 基础主题配置
const baseTheme = createTheme({
  palette: {
    primary: { main: '#1976d2' },
  },
  typography: { fontFamily: 'Roboto, sans-serif' },
});

// 组件样式配置
const componentTheme = createTheme({
  components: {
    MuiContainer: {
      styleOverrides: { root: { maxWidth: '1400px' } },
    },
  },
});

// 错误合并：直接展开会覆盖baseTheme的palette、typography等属性
const finalTheme = {...baseTheme, ...componentTheme};

正确示例（所有配置生效） #

把全局主题配置和组件样式放在同一个createTheme调用里，Material UI会自动完成深层合并：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Container from '@mui/material/Container';

const theme = createTheme({
  // 全局主题：调色板、排版
  palette: {
    primary: { main: '#1976d2' },
    secondary: { main: '#dc004e' },
  },
  typography: {
    h1: { fontSize: '2.5rem', fontWeight: 700 },
  },
  // 组件样式覆盖
  components: {
    MuiContainer: {
      styleOverrides: {
        root: {
          maxWidth: '1400px',
          padding: '0 24px',
        },
      },
    },
  },
});

// 在App中注入主题
function App() {
  return (
    <ThemeProvider theme={theme}>
      <Container>
        {/* 业务组件内容 */}
      </Container>
    </ThemeProvider>
  );
}

export default App;

基于已有主题扩展的正确方式 #

如果需要在预设主题（比如Material UI的官方主题）基础上扩展组件样式，用createTheme的双参数写法，它会自动做深层合并：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { blue } from '@mui/material/colors';

// 先创建基础主题
const baseTheme = createTheme({
  palette: { primary: blue },
});

// 基于基础主题扩展组件样式，不会覆盖原有配置
const finalTheme = createTheme(baseTheme, {
  components: {
    MuiContainer: {
      styleOverrides: { root: { maxWidth: '1400px' } },
    },
  },
});

关键注意事项 #

• 禁止用Object.assign或对象展开运算符直接合并主题对象，Material UI主题是多层嵌套结构，手动合并会丢失深层属性。
• 所有自定义配置要么放在同一个createTheme参数中，要么使用createTheme(prevTheme, overrides)的扩展方式，确保内部完成正确的深层合并。

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