如果 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;
}

就是這樣，我希望它對某人有所幫助。 干杯!