如何在MaterialUI的createMuiTheme中覆盖MuiTypography-colorTextPrimary样式

你的配置存在几个明显错误，修正后即可覆盖默认文本样式：

错误原因 #

• 配置层级错误：palette 是 createMuiTheme 的顶级配置项，你错误将它放到了 overrides 节点内，导致全局调色板配置完全不生效，.MuiTypography-colorTextPrimary 默认还是读取系统内置的浅色主题色值
• 语法错误：MuiTypography 配置对象缺少闭合的 }，导致后续配置解析异常
• 属性重复覆盖：连续定义了两次 palette.text，后面的 text: {default: '#fff'} 会把前面的 primary/secondary 配置全部覆盖
• 未开启内置深色模式：MUI 自带深色模式适配能力，开启后可以自动适配大部分组件的深色样式，不需要手动硬改所有基础色值

修正后的配置代码 #

// MUI v4 用 createMuiTheme，v5 版本请改为 import { createTheme } from '@mui/material/styles'
import { createMuiTheme, ThemeProvider, CssBaseline } from '@material-ui/core';

const darkTheme = createMuiTheme({
  palette: {
    type: 'dark', // v4 开启深色模式用type，v5 改为 mode: 'dark'
    text: {
      primary: '#fff',
      secondary: '#fff',
      disabled: '#fff'
    },
    primary: {
      light: "#ffffff",
      main: "#ffffff",
      dark: "#ffffff",
      myColor: "#dddddd",
    },
    secondary: {
      main: "#F05454",
    },
    table: {
      header: "#fe5544",
    },
    link: {
      main: "#222233",
    },
    third: {
      main: "#555555",
    },
    background: {
      paper: "#222831",
      default: '#121212' // 可补充全局页面背景色
    },
    error: {
      contrastText: "#fff",
      dark: "#333333",
      main: "#366666",
      light: "#eeeeee"
    },
    warning: {
      contrastText: "#fff",
      dark: "#333333",
      main: "#366666",
      light: "#eeeeee"
    },
    info: {
      contrastText: "#fff",
      dark: "#333333",
      main: "#366666",
      light: "#eeeeee"
    },
    success: {
      contrastText: "#fff",
      dark: "#333333",
      main: "#366666",
      light: "#eeeeee"
    }
  },
  typography: {
    fontFamily: "Segoe UI",
    button: {
      fontFamily: [
        "-apple-system",
        "BlinkMacSystemFont",
        '"Segoe UI"',
        "Roboto",
        '"Helvetica Neue"',
        "Arial",
        "sans-serif",
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
      ].join(","),
      fontSize: "1rem",
    }
  },
  overrides: {
    MuiCssBaseline: {
      "@global": {
        color: "#ffffff"
      }
    },
    // 有特殊的Typography自定义样式可以补充在这里，默认调色板生效后不需要额外覆盖colorTextPrimary
  }
});

生效验证 #

确保在应用外层正确包裹主题容器和全局样式重置组件：

function App() {
  return (
    <ThemeProvider theme={darkTheme}>
      <CssBaseline />
      {/* 你的业务代码 */}
    </ThemeProvider>
  )
}

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