如何重写mat-chip-remove定位样式？自定义图标hover样式问题

代码写法可行性 #

你的代码写法是可行的，能够正常渲染带有自定义关闭图标的MatChip组件，但要解决hover时颜色不一致的问题，需要额外添加样式调整。

样式修改方案 #

Angular Material组件默认有样式封装，需要通过::ng-deep（组件内使用时配合:host避免污染全局样式）来覆盖默认样式，以下是具体调整方式：

1. 调整图标居中对齐 #

自定义图标可能和默认图标尺寸不同，先确保按钮内的图标居中：

:host ::ng-deep .mat-chip-remove {
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

2. 统一hover时的颜色 #

根据图标类型选择对应的调整方式：

• 如果使用img标签引入SVG：通过CSS filter属性修改颜色，匹配Chip hover状态的色调：

:host ::ng-deep .mat-chip:hover .mat-chip-remove img {
  /* 示例：将图标改为白色，可根据你的Chip hover颜色调整filter参数 */
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

• 推荐：改用内联SVG：将SVG代码直接写入按钮，这样可以通过fill属性更灵活控制颜色：

<mat-chip *ngFor="let fruit of fruits" (removed)="remove(fruit)">
  {{fruit.name}}
  <button matChipRemove>
    <svg class="close-icon" viewBox="0 0 24 24">
      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
    </svg>
  </button>
</mat-chip>

对应的样式：

:host ::ng-deep .mat-chip-remove .close-icon {
  width: 18px;
  height: 18px;
  fill: currentColor; /* 继承按钮的文字颜色 */
}

/* 匹配Chip hover时的颜色 */
:host ::ng-deep .mat-chip:hover .mat-chip-remove {
  color: #fff; /* 替换为你的Chip hover状态下的目标颜色 */
}

3. 同步按钮hover背景（可选） #

如果需要让按钮hover时的背景和Chip一致，添加以下样式：

:host ::ng-deep .mat-chip:hover .mat-chip-remove {
  background-color: rgba(0, 0, 0, 0.1); /* 替换为Chip hover时的背景色 */
}

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