如何扩展默认Material UI主题 修改部分属性时避免字段缺失

解决方法 #

你提到的属性缺失问题通常是导入路径错误导致的，对应处理方案如下：

• 先确认createTheme的导入路径是否正确，MUI v5 下该方法的正确导入路径为@mui/material/styles，如果误从@mui/styles导入，就会出现默认主题属性没有自动合并的问题。
  正确导入示例：

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

• createTheme本身已经内置了自定义配置与默认主题的深度合并逻辑，你当前的写法本身是符合规范的：仅显式声明要修改的primary、secondary主色，其余未显式声明的属性（包括theme.palette.action.focus这类默认配置）都会自动继承官方默认主题的取值，不需要额外手动合并。
• 如果有特殊场景需要手动基于默认主题做扩展，可以先引入官方默认主题再进行合并，参考代码如下：

  import { createTheme } from '@mui/material/styles';
  import defaultTheme from '@mui/material/styles/defaultTheme';
  import purple from '@mui/material/colors/purple';
  import green from '@mui/material/colors/green';
  
  const theme = createTheme({
    ...defaultTheme,
    palette: {
      ...defaultTheme.palette,
      primary: {
        main: purple[500],
      },
      secondary: {
        main: green[500],
      },
    },
  });
  

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