添加Angular Material主题后全局字体变小问题求助

项目同时使用Bootstrap和Angular Material，在angular.json中引入Angular Material主题后字体明显变小；若移除相关主题配置，字体大小恢复正常，但Angular Material组件无法正常运行。相关效果截图如下：

• 添加Angular Material主题后的效果：
• 未添加Angular Material主题的正常效果：
  从截图可见“India Today”等文本的字体大小存在异常，已尝试所有可行排查方案问题仍未解决，求助可行解决方法。

问题根源 #

Angular Material默认主题会全局重置html根节点的font-size为62.5%（即10px），而Bootstrap默认根字体大小为16px，Bootstrap的所有组件样式、普通文本的rem单位均基于16px计算，二者样式冲突导致全局字体偏小。

解决方法 #

方法1：全局覆盖根字体配置（最简单快速） #

在项目全局样式文件（通常为src/styles.scss或src/styles.css）中添加如下代码，强制覆盖Material的全局字体设置：

html, body {
  font-size: 16px !important; /* 对齐Bootstrap默认根字体大小 */
}

/* 可选：适配Material组件的字体大小，避免组件内部字体异常 */
.mat-typography {
  font-size: 1rem;
}

方法2：自定义Material主题关闭全局排版重置 #

如果不需要Material的全局排版规则，可以在自定义主题时关闭全局typography注入，仅保留组件所需的主题样式，完全不影响Bootstrap的全局样式：

1. 先在angular.json的styles数组中移除默认的Angular Material预构建主题引入
2. 在全局样式文件中添加自定义主题配置：

@use '@angular/material' as mat;

$custom-theme: mat.define-light-theme((
  color: (
    primary: mat.define-palette(mat.$indigo-palette),
    accent: mat.define-palette(mat.$pink-palette),
    warn: mat.define-palette(mat.$red-palette),
  ),
  // 关闭全局typography样式注入，避免修改全局字体
  typography: null
));

@include mat.all-component-themes($custom-theme);

方法3：调整样式引入优先级 #

如果不想修改主题配置，可直接调整angular.json中styles数组的引入顺序，将Bootstrap样式放在Material主题之后，让Bootstrap的全局样式优先级更高覆盖Material的字体设置：

"styles": [
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css", // Material主题放前
  "node_modules/bootstrap/dist/css/bootstrap.min.css", // Bootstrap样式放后
  "src/styles.scss"
]

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