Angular Material中mat-typography全局CSS类不生效问题求助

我来帮你排查这个mat-typography全局类不生效的问题，结合Angular Material的样式规则，大概率是这几个环节出了问题，你可以逐一排查：

• 检查样式导入顺序
  Angular Material的主题样式会依赖你导入的自定义字体，所以必须确保谷歌字体的@import语句放在Material主题样式的前面。如果顺序反了，主题会先加载默认的Roboto字体，后续导入的字体可能无法覆盖。正确的顺序应该是这样：

  /* 先导入谷歌字体，替换成你实际使用的字体链接 */
  @import "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap";
  /* 再导入Angular Material主题 */
  @import "~@angular/material/prebuilt-themes/indigo-pink.css";
  

• 确认TypographyModule已导入
  虽然mat-button这类组件样式能正常工作，但全局的mat-typography类可能需要单独导入TypographyModule才能生效。打开你的app.module.ts，确保添加了这个模块的导入：

  import { TypographyModule } from '@angular/material/typography';
  
  @NgModule({
    imports: [
      // ... 其他已导入的模块
      TypographyModule
    ]
  })
  export class AppModule { }
  

• 排查样式覆盖问题
  打开浏览器的开发者工具（F12），选中<body>元素，查看Computed样式面板里的font-family属性，看看是不是被其他自定义样式覆盖了。比如如果你的styles.css里有直接给body设置字体的规则：

  body {
    font-family: Arial, sans-serif;
  }
  

  这种情况下，类选择器（.mat-typography）和元素选择器（body）的优先级相同，谁在样式文件里靠后谁就会生效。你可以调整自定义样式的位置，或者用body.mat-typography这种特指选择器提升优先级。

• 验证主题字体配置
  如果你自定义了Angular Material的typography配置，要确保在主题里正确绑定了你的字体。比如在自定义主题文件里：

  @import '@angular/material/theming';
  
  // 自定义typography配置
  $custom-typography: mat-typography-config(
    $font-family: '你的字体名称',
    // 其他typography相关设置
  );
  
  // 把自定义typography绑定到主题
  $custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn, $custom-typography);
  
  // 应用主题
  @include angular-material-theme($custom-theme);
  

  要是你没自定义主题，默认主题会用Roboto字体，这时候要确保你导入的谷歌字体名称和默认字体匹配，或者主题能正确识别你导入的字体。

按照上面的步骤排查，应该能解决mat-typography不生效的问题。

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