如何删除按钮样式或将动态添加的类覆盖到材料2中的按钮答案

【问题标题】：How to remove button style or overwrite dynamically added classes to button in material2如何删除按钮样式或将动态添加的类覆盖到材料2中的按钮
【发布时间】：2021-07-09 02:08:56
【问题描述】：

我有打开按钮

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

在按钮单击时，弹出模式打开和关闭后模式。 cdk-focused 和 cdk-program-focused 类添加到此按钮并获得一些连锁反应。

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

【问题讨论】：

stackoverflow.com/questions/38774014/…
@VijaySankhat，如果只有一个按钮，想为整个项目中的所有按钮实现。
然后对所有按钮使用 [ngClass]
我想删除动态添加的类[ngClass]，你能告诉我如何使用[ngClass] 删除类吗？我经历了这个angular.io/api/common/NgClass。但没有得到
有没有类似指令可以从整个项目的按钮中删除这些类

标签： html css angular angular-material2

【解决方案1】：

我建议两种解决方案：

1.首先，在那个按钮上设置一个额外的类，以避免所有垫子凸起的按钮都受到样式变化的影响，我想这不是你的目标。 p>

HTML：

<button mat-raised-button class="myButton" (click)="openDialog();">Pick one</button>

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

然后你可以设置垫子的样式

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

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

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

Demo

b) 使用 ViewEncapsulation.none 设置：

类：

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

CSS：

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

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

Demo

c) 在 style.css 中设置：

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

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

Demo

当您单击该按钮时，它会获得焦点。通过将焦点设置在其他元素上来关闭该按钮的焦点：

... <input matInput #input [(ngModel)]="name" placeholder="What's your name?"> ... <button mat-raised-button class="myButton" (click)=" input.focus();openDialog() ">Pick one </button>

Demo

【讨论】：

它的工作原理，你能告诉我应该使用哪种样式来消除那个按钮效果
当我将这些样式放在特定组件的 scss 文件中时，它工作正常。但是当我将这些样式放入我的styles.scss 文件时，它不起作用。

【解决方案2】：

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

.mat-app-background{
  background: transparent !important
}

【讨论】：

这对我来说就像一个魅力，但你能解释一下它是如何工作的

【解决方案3】：

即使我经历了很多尝试和错误的方法，但最终通过在创建模型时添加以下功能来解决它。

在对话创建中添加这个

restoreFocus:false

*对话框是否应该将焦点恢复到 *先前聚焦的元素，在它关闭之后。

【讨论】：

【解决方案4】：

我在使用 Angular 11 和 mat-drawer 的第一个链接时遇到了同样的问题，它正在添加这种效果。每当我打开垫子抽屉时，这个跨度就会被添加到第一个链接中

<span class="mat-button-focus-overlay"></span>

所以我必须在组件的 scss 中执行此操作

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

这可能与上面的答案相似，希望这对使用 mat-drawer 的人有所帮助。

【讨论】：