MUI全局主题配置下Typography未自动应用primary主色问题

两个组件默认行为不一致，不是palette配置失效：

• Button组件内置的默认color属性值就是"primary"，所以不手动传color属性时，会自动读取palette.primary.main作为主色
• Typography组件默认color属性值为undefined，渲染时默认使用palette.text.primary对应的全局文本色，不会自动读取品牌主色palette.primary.main
• 直接在typography根配置项写color属性不生效，是因为MUI的typography配置节点默认只处理字体、字号、行高、字重这类排版规则，根节点的color字段不会被组件样式逻辑读取，只有给每个排版变体（body1、h1、caption等）单独配置color才会生效，这种写法冗余度极高，不推荐使用。

方案1：全局设置Typography默认属性（最推荐） #

在主题的components配置项中，给Typography组件统一设置默认color属性，所有未显式传color的Typography都会自动应用primary主色，单组件需要特殊颜色时直接在组件上写color属性即可覆盖默认值，完全符合MUI自定义规范：

import * as React from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { purple } from "@mui/material/colors";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

const theme = createTheme({
  palette: {
    primary: {
      main: purple[500]
    },
    secondary: {
      main: "#11cb5f"
    }
  },
  // 新增组件默认配置
  components: {
    MuiTypography: {
      defaultProps: {
        color: "primary"
      }
    }
  }
});

export default function Palette() {
  return (
    <ThemeProvider theme={theme}>
      <Button>Primary</Button>
      <Button color="secondary">Secondary</Button>
      {/* 此处Typography自动应用primary紫色，无需显式传color */}
      <Typography>some text</Typography>
    </ThemeProvider>
  );
}

方案2：修改全局默认文本色 #

如果你的业务场景要求所有默认文本（不止Typography，还包括List、Card、Table等组件的默认文字）都使用primary主色，可以直接修改palette中的text.primary值：

const theme = createTheme({
  palette: {
    primary: {
      main: purple[500]
    },
    secondary: {
      main: "#11cb5f"
    },
    // 全局默认文本色设为primary主色
    text: {
      primary: purple[500]
    }
  }
});

注意：该方案会改变所有依赖全局文本色的组件样式，适合品牌主色就是全局默认文本色的设计场景。

补充：如果只想给某一类排版变体设置默认主色（比如仅正文body1用主色，标题h1/h2保持深灰），可以在typography配置中单独给对应变体设置color：

const theme = createTheme({
  typography: {
    body1: {
      color: purple[500]
    }
  }
})

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