角定制垫芯片颜色答案

【问题标题】：Angular custom mat chip color角定制垫芯片颜色
【发布时间】：2021-10-21 16:01:49
【问题描述】：

除了主要颜色、重音颜色、警告颜色和默认颜色之外，还有什么方法可以使垫子具有自定义颜色？这是我现在的代码

 <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' 现在是黑色的，我想把它改成绿色，但我不知道怎么做。任何帮助将不胜感激。

【问题讨论】：

请查看this

标签： angular

【解决方案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>

【讨论】：

谢谢！这让我发疯，因为我没有角度方面的经验。我已经尝试过您的方法，但由于选择了反式，它无法正常工作。删除它允许我现在使用自定义类。