从Angular Material复选框更改CSS

Question

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

这是官方网页上的链接：https : //material.angular.io/components/checkbox/overview

谢谢您的帮助

Answer 1

默认情况下，复选框（选中标记和波纹）均使用accent主题的颜色。您可以通过使用color = "primary"元素上的属性将其更改为使用原色。如果要使用自定义颜色（即不是来自主题），则必须手动覆盖CSS或创建自定义主题。

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

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

这是一个例子。