如果 div 中有多个按钮，如何更改垫子凸起按钮的颜色？

Question

[编辑] 解决方案在评论部分。

我想改变垫子凸起按钮的颜色，但每个按钮都有不同的颜色。 我有以下情况：

<div *ngIf="visible" class="dialog">
  <button (click)="openEditDialog()" color="accent" mat-raised-button>Edit fields</button>
  <button (click)="update()" *ngIf="showSaveCancel" color="primary" mat-raised-button>Update</button>
  <button (click)="cancel()" *ngIf="showSaveCancel" color="warn" mat-raised-button>Cancel</button>
</div>

“主要”和“警告”选项适合我对“更新”和“取消”按钮的需求，但我需要将“编辑字段”按钮设为绿色。 有没有办法让那个按钮变成绿色，按钮保持在同一个 div 中？

Answer 1

<style>
.greenButton {
  background-color: green;
}
.greenButton:hover {
  background-color: lightgreen;
}
...
</style>

<button class="greenButton" ...>

Answer 2

这是我找到的一个解决方案，所以如果你们中的任何人有类似的问题，请进一步阅读，解释在最后：

原始代码：

<div *ngIf="visible" class="dialog">
  <button (click)="openEditDialog()" color="accent" mat-raised-button>Edit fields</button>
  <button (click)="update()" *ngIf="showSaveCancel" color="primary" mat-raised-button>Update</button>
  <button (click)="cancel()" *ngIf="showSaveCancel" color="warn" mat-raised-button>Cancel</button>
</div>

新代码：

<div *ngIf="visible" class="dialog">
  <button (click)="openEditDialog()" color="green" mat-raised-button>Edit fields</button>
  <button (click)="update()" *ngIf="showSaveCancel" color="primary" mat-raised-button>Update</button>
  <button (click)="cancel()" *ngIf="showSaveCancel" color="warn" mat-raised-button>Cancel</button>
</div>

如您所见，我所做的只是将自定义名称添加到“编辑字段”按钮的颜色值，从“重音”到“绿色”。 然后在 CSS 中，我添加了

.mat-green {
  color: white;
  background-color: forestgreen;
}

就是这样，我希望它对某人有所帮助。 干杯!