不管怎样，MatRipple 都会继续表现

Question

我的元素周围的空间非常有限，mat-radio-button所以我想禁用它。它处于半禁用状态，但在hover运行时，它的“幽灵”继续显示hover如下；

这是我的mat-radio-button;

<mat-radio-button  [disableRipple]="true" [checked]="element == expandedElement"(change)="ShowDetail(element)" ></mat-radio-button>

需要明确的是，[disableRipple]禁用 上显示的效果onclick，但不禁用 上的效果hover。有人有可以帮助我的解决方案吗？

这是我尝试过的，但不起作用，它位于styles.css组件的位置（document.querySelectorAll()这样做时会给出幽灵部分）；

span.mat-ripple-element.mat-radio-persistent-ripple{
  display: none !important;
}

Stakblitz 显示仅删除事件disableRipple上显示的涟漪：示例（自动是具有属性的）onlickdisableRipple

Answer 1

要消除波纹效果，您只需将以下内容添加到您的 styles.scss 文件中：

.mat-radio-ripple {
  display: none;
}

正如您在这里看到的： https: //stackblitz.com/edit/angular-ehgpd2-2hvt7s ?file=src/styles.scss

这消除了材质单选按钮的波纹。

要删除所有垫子元素，您可以执行以下操作：

.mat-ripple { display: none; }

要删除 if 仅用于复选框：

.mat-checkbox-ripple { display: none; }

ETC...

正如您在这里看到的： https: //github.com/angular/components/issues/17404

（另请注意，正如 guthub 问题中提到的，焦点/点击上的涟漪是为了可访问性，这就是它们难以摆脱的原因，我认为你应该记住这一点并在垫子收音机上做一些事情如果活跃或有焦点）