Html 如何删除按钮样式或覆盖material2中动态添加到按钮的类

我有打开的按钮

<button mat-raised-button (click)="openModal()
"type="button" color="primary">Open Modal </button>

开放模式

点击按钮，弹出模式打开和关闭模式

cdk focused

和

cdk program focused

类添加到此按钮，并在该按钮上获得一些连锁反应

我想要摆脱这种风格，想要删除或覆盖那些在关闭模式后添加到按钮的类*

---

我建议两种解决方案：

1。首先，在该按钮上设置一个附加类，以避免所有垫起的按钮受到样式更改的影响，我想这不是您的目标

HTML:

选择一个

CSS:

.myButton:focus{
    box-shadow: 0 0 rgba(255, 255, 255, 1) !important;
    transition:none !important;
    background-color: rgba(255, 255, 255, 1) !important;
    -webkit-tap-highlight-color:rgba(255, 255, 255, 1) !important;
}

import { ViewEncapsulation } from '@angular/core';
...
@Component({
...
    encapsulation:ViewEncapsulation.None
})

.myButton>.mat-button-focus-overlay {
    background-color:transparent !important;
}

.myButton>.mat-app-background{
  background: white !important
}

然后，您可以通过以下两种方式设置垫升高按钮的样式：

a） 使用：：ng deep在组件的样式表中设置它：

::ng-deep .myButton>.mat-button-focus-overlay {
    background-color:transparent !important;
}

::ng-deep .mat-app-background{
  background: white !important
}

b） 使用ViewEncapsulation.none进行设置：

类别：

.myButton:focus{
    box-shadow: 0 0 rgba(255, 255, 255, 1) !important;
    transition:none !important;
    background-color: rgba(255, 255, 255, 1) !important;
    -webkit-tap-highlight-color:rgba(255, 255, 255, 1) !important;
}

import { ViewEncapsulation } from '@angular/core';
...
@Component({
...
    encapsulation:ViewEncapsulation.None
})

.myButton>.mat-button-focus-overlay {
    background-color:transparent !important;
}

.myButton>.mat-app-background{
  background: white !important
}

CSS:

.myButton:focus{
    box-shadow: 0 0 rgba(255, 255, 255, 1) !important;
    transition:none !important;
    background-color: rgba(255, 255, 255, 1) !important;
    -webkit-tap-highlight-color:rgba(255, 255, 255, 1) !important;
}

import { ViewEncapsulation } from '@angular/core';
...
@Component({
...
    encapsulation:ViewEncapsulation.None
})

.myButton>.mat-button-focus-overlay {
    background-color:transparent !important;
}

.myButton>.mat-app-background{
  background: white !important
}

c） 在style.css中设置它：

.myButton>.mat-button-focus-overlay {
    background-color:transparent !important;
}

.myButton>.mat-app-background{
  background: white !important
}

当你点击按钮时，它会获得焦点。通过将焦点设置在其他元素上，将焦点从该按钮移开：

。。。
...
选择一个

---

即使是我，也经历了很多尝试和错误的方法，但最终通过在创建模型时添加以下功能得到了修复

在diolog创建中添加以下内容

恢复焦点：错误

*对话框是否应将焦点恢复到

---

*之前聚焦的元素，关闭后

@VijaySankhat，如果只有一个按钮，则要为整个项目中的所有按钮实现。然后，对所有按钮使用[ngClass]我要删除动态添加的类，

[ngClass]

，您能告诉我如何使用

[ngClass]

删除类吗。我经历了这一切。但是没有得到任何像指令这样的方法可以在整个项目中删除按钮中的类，你能告诉我应该使用哪种样式来删除按钮效果吗？当我把这些样式放在特定组件的scss文件中时，效果很好。但是当我把这些样式放在我的

styles.scss

文件中时，它就不起作用了。这对我来说很有吸引力，但是你能解释一下它是如何起作用的吗