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

显示disableRipple 的Stakblitz 仅移除onlick 事件上显示的波纹：example（自动是具有disableRipple 属性的那个）

Answer 1

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

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

如您所见：https://stackblitz.com/edit/angular-ehgpd2-2hvt7s?file=src/styles.scss

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

要为所有垫子元素删除它，您可以这样做：

.mat-ripple { display: none; }

如果仅用于复选框，则删除：

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

等等……

如您所见：https://github.com/angular/components/issues/17404

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

Answer 2

在悬停时移除背景颜色。在您的 style.css/style.scss 文件中添加下面的 css。

.mat-radio-container:hover .mat-radio-persistent-ripple {
  opacity: 0 !important;
}