从Angular Material Checkbox更改CSS

Question

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

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

感谢您的帮助

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

Here's an example