如何在Angular Materials的mat-chip中修改字体大小（2023）

要避免使用!important这类CSS权宜之计，正确的做法是利用Angular Material的主题排版配置系统，从根源上定义组件的字体样式，以下是具体实现步骤：

全局修改（所有mat-chip生效） #

1. 打开你的Angular Material主题配置文件（通常是styles.scss或单独的theme.scss）
2. 导入Angular Material的主题工具，然后自定义排版配置，覆盖$chip对应的排版级别：

@import '@angular/material/theming';

// 自定义排版配置，指定chip的字体大小、行高、字重
$custom-typography: mat-typography-config(
  $font-family: 'Roboto, "Helvetica Neue", sans-serif',
  $chip: mat-typography-level(12px, 1.2, 400) // 第一个参数就是字体大小
);

// 将自定义排版注入到核心样式
@include mat-core($custom-typography);

// 以下是你的主题颜色配置（保持原有代码即可）
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$warn: mat-palette($mat-red);

$theme: mat-light-theme($primary, $accent, $warn);

// 应用主题
@include angular-material-theme($theme);

这样配置后，所有<mat-chip>组件都会自动使用你定义的12px字体大小，完全符合Angular Material的标准规范，不需要任何强制CSS。

局部修改（单个/部分mat-chip生效） #

如果只需要修改特定的mat-chip，可以利用Angular Material提供的排版类，或者自定义一个基于主题的排版类：

方法1：使用预定义排版类 #

Angular Material内置了如mat-body-1、mat-caption等排版类，直接应用到chip上即可：

<mat-chip class="mat-caption">使用内置小字体的Chip</mat-chip>

方法2：自定义局部排版类 #

在主题文件中定义额外的排版级别：

$small-chip-typography: mat-typography-level(10px, 1.1, 400);

// 生成自定义类
.custom-small-chip {
  @include mat-typography-level($small-chip-typography);
}

然后在模板中应用：

<mat-chip class="custom-small-chip">自定义小字体的Chip</mat-chip>

为什么原CSS代码不生效？ #

你之前尝试的.mat-chip { font-size: 12px !important; }不生效，主要是因为Angular的视图封装机制：组件的样式默认无法穿透到Angular Material组件的内部DOM结构。即使加了!important，也可能被组件内部优先级更高的样式覆盖，这也是为什么不推荐这种写法的原因。

内容的提问来源于stack exchange，提问作者toby.harding