如何实现Angular Material Chips的静态无交互状态？

我想实现类似AngularJS Material 1.1.9中的静态Chips效果——Chips不可选中、点击或悬停，仅作为静态展示，但我使用的是Angular Material。

我看到Angular Material文档里的「静态内容」章节有示例代码，但尝试后并未生效：

<mat-chip-set role="list">
  <mat-chip role="listitem"> Sugar </mat-chip>
  <mat-chip role="listitem"> Spice </mat-chip>
  <mat-chip role="listitem"> Everything Nice </mat-chip>
</mat-chip-set>

我的核心需求：

• 移除mat-chip悬停时的灰色背景
• 移除mat-chip点击时的波纹效果（我了解可通过[disableRipple]="true"实现？）
• 移除mat-chip点击时的灰色背景

我不希望Chips在悬停或点击时产生任何交互效果。当前我的代码如下：

<mat-chip-list class="privacy-tags">
  <mat-chip>Public</mat-chip>
  <mat-chip>Private</mat-chip>
  <mat-chip>Confidential</mat-chip>
</mat-chip-list>

补充说明 #

我尝试了以下CSS代码，但出现问题：左侧标签仍可点击，右侧标签不可点击；仅存在一个标签时也有异常效果。

.mat-chip {
    color: magenta !important;
    background-color: white !important;
    border: 1px magenta solid !important;
    pointer-events: none !important;
}

.mat-chip:hover {
    background-color: unset !important;
}

对应效果：

• 多标签时：[多标签交互异常截图]
• 单标签时：[单标签样式异常截图]

可行解决方案 #

要实现完全无交互的静态Chips，需从组件属性配置和CSS样式覆盖两方面配合处理：

1. 组件属性配置

给每个mat-chip添加[disableRipple]="true"关闭波纹效果，同时给mat-chip-list和mat-chip设置规范的ARIA角色，修正组件默认的交互逻辑：

<mat-chip-list class="privacy-tags" role="list">
  <mat-chip role="listitem" [disableRipple]="true">Public</mat-chip>
  <mat-chip role="listitem" [disableRipple]="true">Private</mat-chip>
  <mat-chip role="listitem" [disableRipple]="true">Confidential</mat-chip>
</mat-chip-list>

2. CSS样式修复

将pointer-events: none应用到整个mat-chip-list层级，彻底禁用所有交互，同时强制覆盖hover、active、focus状态的样式：

.privacy-tags {
  pointer-events: none; /* 禁用整个标签列表的所有交互 */
}

.privacy-tags .mat-chip {
  color: magenta;
  background-color: white;
  border: 1px solid magenta;
  /* 强制覆盖所有交互状态的样式 */
  &:hover,
  &:active,
  &:focus {
    background-color: white !important;
    outline: none; /* 移除焦点时的轮廓线 */
  }
}

注意：使用自定义类privacy-tags限定样式范围，避免全局修改.mat-chip影响其他组件。

问题原因说明

• 之前仅给mat-chip加pointer-events: none时，mat-chip-list内部的容器元素仍可能响应点击，导致部分标签保留交互
• 单标签时的异常是因为mat-chip-list在只有一个子元素时的默认样式逻辑，添加role="list"和role="listitem"可以修正该行为

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