覆盖垫芯片移除定位样式

Question

我读到的片上文档：

MatChipRemove

应用适当的(单击(支持并添加样式以用于"材料设计"；取消"；图标位于https://material.io/icons/#ic_cancel.

您可以使用自定义图标，但可能需要覆盖垫芯片去除定位样式，使图标正确居中芯片。

选择器：[matChipRemove]

但是我该怎么做呢？我更改了图标，但现在当我悬停在x按钮上时，我看到的颜色与芯片不同。我需要更改我的html组件中mat-chip中包含的按钮的默认样式，我可以进行吗

<mat-chip *ngFor="let fruit of fruits" (removed)="remove(fruit)">
{{fruit.name}}
<button matChipRemove>
<img src="./assets/icons/close.svg" alt="x" />
</button>
</mat-chip> 

Answer 1

图标更改只是更改图标本身。它不做任何其他事情。

它会更改颜色，因为"材质设计"规范是这样说的，而且由于它们遵循指导原则，因此按钮会更改颜色。

它们只是告诉你更新定位样式，因为并非所有图标的大小都相同。

但是你当然也可以改变图标的颜色。以下是操作方法。

在您的组件样式中：

mat-chip {
&:hover [matChipRemove] {
color: blue;
opacity: 1;
}
[matChipRemove] {
&:hover {
opacity: 1;
color: red;
}
}
}