角度定制垫片颜色

Question

除了主色、强调色、警告色和默认色之外，是否有任何方法可以使垫片具有自定义颜色？这是我现在的代码：

<mat-chip *ngIf="status.name==='open'" color="warn" selected trans>{{status.display_name}}</mat-chip>
<mat-chip *ngIf="status.name==='pending'" color="accent" selected trans>{{status.display_name}}</mat-chip>
<mat-chip *ngIf="status.name==='assigned'" color="primary" selected trans>{{status.display_name}}</mat-chip>
<mat-chip *ngIf="status.name==='verification'" color="yellow" selected trans>{{status.display_name}}</mat-chip>

是的，很明显我希望最后一个垫片具有黄色。color='primary' 现在是黑色，我想将其更改为绿色，但我不知道该怎么做。任何帮助，将不胜感激。

Answer 1

您需要添加 CSS 类而不是color="primary" 创建您自己的 CSS 类

.assigned-chip{
     background-color: <<color code>> // as per your requirement
}

<mat-chip *ngIf="status.name==='assigned'" class="assigned-chip">{{status.display_name}}</mat-chip>