Angular Material Button背景颜色在应用css时不会改变答案

【问题标题】：Angular Material Button background color not changing on applying cssAngular Material Button背景颜色在应用css时不会改变
【发布时间】：2021-11-25 12:29:37
【问题描述】：

我正在 Angular 13 中开发一个示例项目，其中我使用了 Angular Material 主题。在组件中，我使用材料按钮进行注销确认对话框窗口，我在 css 中将按钮背景颜色更改为白色，但是当我运行项目时，即使应用 css 后它仍然显示默认灰色 .有什么方法可以强制更改角度材质颜色，因为我使用的那个不起作用。

下面是代码文件，便于理解

logout-dialog.component.html

<h1 mat-dialog-title class="logout-heading">Logout</h1>
<div mat-dialog-content>
  <p class="message">Are you sure you want to logout ?</p>
</div>
<div mat-dialog-actions class="buttons-div">
  <button mat-button class="cancel" (click)="cancel()">Cancel</button> //THIS BUTTON SHOULD HAVE WHITE BACKGROUND
  <button mat-button class="logout" (click)="logout()">Ok</button>
</div>

logout-dialog.component.css

.cancel {
  border: 1px solid #3f51b5;
  color: #3f51b5;
  background-color: #fff !important;
}

图片

有什么解决办法吗？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

尝试将样式放在您的 styles.css 文件中

【讨论】：

嗨 Kibe M.C 我试着把它放在 style.css 但不起作用
尝试通过在浏览器上按 ctrl+shift+i 并在其上应用 CSS 来检查特定元素。
嗨 Kibé M.C，我尝试检查它，它在 css 中显示应用的颜色，但在浏览器中没有显示

【解决方案2】：

你可以试试inline-css

<h1 mat-dialog-title class="logout-heading">Logout</h1>
<div mat-dialog-content>
  <p class="message">Are you sure you want to logout ?</p>
</div>
<div mat-dialog-actions class="buttons-div">
  <button style="background-color: #fff !important;" mat-button class="cancel" (click)="cancel()">Cancel</button>  //my changes
  <button mat-button class="logout" (click)="logout()">Ok</button>
</div>

【讨论】：

Hi Dako patel 内联 css 已应用，但无法正常工作

【解决方案3】：

也许你可以尝试使用::ng-deep 选择器

::ng-deep button.cancel {
  border: 1px solid #3f51b5;
  color: #3f51b5;
  background-color: #fff !important;
}

【讨论】：

嗨 Farith Adnan，我试过了，但还是不行