如何设置MUI Typography组件默认文本颜色为text.primary

解决方案 #

1. 直接修改MUI全局主题实现默认配置 #

你可以直接在全局主题定义中为MuiTypography设置默认属性，一次性全局生效：

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

const customTheme = createTheme({
  palette: {
    text: {
      primary: '#你的自定义色值', // 你已经设置过的自定义text.primary配色
    }
  },
  components: {
    // 覆盖Typography组件的默认props
    MuiTypography: {
      defaultProps: {
        color: 'text.primary',
      },
    },
  },
});

将该主题通过ThemeProvider包裹应用根节点后，所有未显式传入color属性的<Typography>组件，都会自动使用text.primary的配色。

2. 更推荐的实现方式：封装业务专属通用文本组件 #

是的，相比直接修改原生MUI组件的默认行为，封装业务通用文本组件是工业界更常用的方案，优势非常明显：

• 除了颜色，你还可以统一配置默认字号、行高、字重、响应式规则等业务通用规范，避免每个页面重复写相同属性
• 不会污染原生Typography的默认行为，避免影响依赖原生默认配置的第三方组件、历史代码
• 可以根据业务场景自定义语义化组件命名，比如<StdBody>（标准正文）、<AuxText>（辅助说明文本）、<PageTitle>（页面标题）等，代码可读性和团队协作效率更高

封装示例参考：

// 业务通用文本组件
import { Typography } from '@mui/material';

// 基础通用文本，默认使用text.primary配色
export const StdTypography = (props) => {
  return <Typography color="text.primary" variant="body1" {...props} />;
};

// 还可以扩展不同场景的文本组件，比如辅助文本默认用text.secondary
export const AuxTypography = (props) => {
  return <Typography color="text.secondary" variant="body2" {...props} />;
};

使用时直接导入自定义组件即可，需要调整属性时正常传参就会覆盖默认配置，灵活性和可维护性都远高于直接修改全局默认配置。

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