从 Angular Material 复选框更改 CSS答案

【问题标题】：Changing CSS from Angular Material Checkbox从 Angular Material 复选框更改 CSS
【发布时间】：2018-06-11 21:33:29
【问题描述】：

有人可以告诉我，当您单击角材料复选框时，我如何更改圆形的颜色。如下图所示（粉色圆圈）

感谢您的帮助

【问题讨论】：

这个圆叫做ripple。您想仅更改复选框波纹或应用程序中所有波纹的颜色吗？还是您想完全禁用波纹？
实际上，我想更改应用程序中的所有涟漪效果。较早的帖子帮助我更改了复选框波纹.green-checkbox { .mat-ripple-element { background-color: $darkgreen !important; opacity: 0.5; } } 我不知道，为什么它被删除了
@Peter 我删除了我的帖子，因为出于某种原因它被否决了。如果对你有帮助，我会取消删除。

【解决方案1】：

复选框（复选标记和波纹）默认使用主题中的accent 颜色。您可以使用元素上的color = "primary" 属性将其更改为使用原色。如果您想使用自定义颜色（即不是来自主题），您必须手动覆盖 CSS 或 create a custom theme。

如果您只想覆盖波纹的颜色，您可以覆盖.mat-ripple-element 类，该类会在您单击复选框时添加到生成的波纹元素上。将您想要的样式添加到theme.scss。

.custom-ripple {
  .mat-ripple-element {
    background-color: rgba(100, 200, 50, 0.5) !important;
  }
}

【讨论】：