angular - 从 Angular Material 复选框更改 CSS

Question

有人可以告诉我，当您单击 Angular Material 复选框时，我如何更改圆形的颜色。如下图所示(粉色圆圈)

以下是官网链接: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 .