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

Question

我有打开按钮

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

按钮按钮单击，弹出模式打开，关闭模态后。 cdk-focused和cdk-program-focused类已添加到此按钮并对其产生一些连锁反应。

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

Answer 1

我建议两种解决方案：

1。首先，在该按钮上设置一个额外的类，以避免所有垫子凸起的按钮受到样式更改的影响，这不是你的目标，我假设

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

然后你可以通过

设置mat-raised-button的样式

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

1. 单击按钮时，该按钮会获得焦点。通过将焦点设置在另一个元素上来关闭该按钮的焦点：

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

Demo

Answer 2

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

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

Answer 3

即使我经历了许多反复试验的方法，但最终还是在创建模型时通过添加以下功能对其进行了修复。

在diolog创建中添加此

restoreFocus：false

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

Answer 4

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

let searchquery = '';
searchform.addEventListener('submit', (e) => {
  e.preventDefault();
  let searchquery = e.target.querySelector('input').value;
  console.log(searchquery);
  fetchAPI(searchquery);
});

async function fetchAPI(searchquery) {
  const baseurl = `https://api.edamam.com/search?q=${searchquery}&app_id=${app_id}&app_key=${app_key}&to=20`;
}

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

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

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