如何修改Angular Material Mat-chip选中状态的背景颜色？

嘿，我之前折腾Angular Material芯片样式的时候也卡过这个点！你已经搞定了选中状态的切换，接下来改选中时的背景颜色其实就是要覆盖Angular Material的默认样式——因为它的内置样式优先级挺高的，得用特定的方式才能生效。

方法一：用::ng-deep穿透样式隔离 #

这是最直接的方式，适合只在单个组件里修改样式。在你的组件CSS文件里添加这段代码：

::ng-deep .mat-basic-chip.mat-chip-selected {
  background-color: #2196F3; /* 换成你想要的颜色，比如这里是蓝色 */
  color: #ffffff; /* 可选，把文字改成白色更显眼 */
}

解释一下：::ng-deep会打破组件的样式隔离，让你的样式能作用到Angular Material的内部组件上；.mat-basic-chip.mat-chip-selected是选中状态下基础芯片的专属选择器，这样就能精准覆盖默认样式。

方法二：关闭组件样式隔离（ViewEncapsulation.None） #

如果你不想用::ng-deep，可以在组件的TS文件里设置样式隔离为None：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  encapsulation: ViewEncapsulation.None // 关闭样式隔离
})
export class YourComponent {
  // 你的组件逻辑
}

然后直接在CSS里写样式就行，不用加::ng-deep：

.mat-basic-chip.mat-chip-selected {
  background-color: #2196F3;
  color: #ffffff;
}

⚠️ 注意：这种方式要小心，因为组件的样式会全局生效，可能影响其他地方的芯片样式，所以只推荐在独立组件或者确定不会冲突的场景用。

小优化：绑定选中状态到数据模型 #

看你的代码里写了selected="false"，其实更推荐把选中状态和你的pkg对象绑定，这样数据和视图能同步，后续处理选中数据也更方便：

<mat-chip-list formControlName="packageName">
  <mat-basic-chip 
    *ngFor="let pkg of packages" 
    #lbl 
    [selected]="pkg.isSelected" <!-- 绑定到pkg的isSelected属性 -->
    (click)="selectedPkg(lbl, pkg)">
    {{pkg.cbsCode}}<br>
    <!-- 其他内容 -->
  </mat-basic-chip>
</mat-chip-list>

然后TS里的selectedPkg函数可以改成：

selectedPkg(chip: MatChip, pkg: any) {
  chip.toggleSelected();
  pkg.isSelected = chip.selected; // 同步数据模型的状态
}

其实核心就是找到Angular Material芯片选中状态的专属CSS类，然后用合适的方式覆盖它的默认背景色，上面两种方法都能解决问题，根据你的场景选就行~

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