Angular Material Button应用自定义CSS后背景色不生效如何解决

该问题由两个原因共同导致：

• Angular默认开启的视图封装机制会给组件内的CSS选择器自动添加属性前缀，降低了自定义样式的优先级
• Angular Material自带的mat-button样式选择器优先级高于单一类选择器，即使用!important也无法覆盖

以下是三种可行的解决方法，按推荐度排序： #

方法1：使用::ng-deep限定作用域（最推荐，不影响全局样式） #

在组件CSS中用:host配合::ng-deep修饰选择器，即可突破视图封装限制，同时只会作用于当前组件内的元素，不会污染全局样式：

/* logout-dialog.component.css */
:host ::ng-deep .cancel {
  border: 1px solid #3f51b5;
  color: #3f51b5;
  background-color: #fff !important;
}

/* 可按需覆盖 hover、active 状态的背景色 */
:host ::ng-deep .cancel:hover,
:host ::ng-deep .cancel:active {
  background-color: #f8f9fa !important;
}

方法2：修改组件视图封装规则 #

如果你不想用::ng-deep，可以在当前组件的TS文件中关闭视图封装，原有的CSS代码就可以直接生效：

/* logout-dialog.component.ts */
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-logout-dialog',
  templateUrl: './logout-dialog.component.html',
  styleUrls: ['./logout-dialog.component.css'],
  // 添加下面这行关闭视图封装
  encapsulation: ViewEncapsulation.None
})
export class LogoutDialogComponent {
  // 原有组件逻辑保持不变
}

注意：关闭视图封装后，当前组件的所有CSS都会变成全局样式，建议给类名添加特殊前缀避免和其他组件样式冲突。

方法3：将样式写入全局样式文件 #

直接把.cancel的样式规则写到项目根目录的全局样式文件（通常是src/styles.css或者src/styles.scss）中，全局样式优先级高于组件封装样式，不需要额外配置即可生效。

你遇到的问题截图参考：

内容的提问来源于stack exchange，提问作者Mohit Kumar Sharma