从 Angular Material 复选框更改 CSS [英] Changing CSS from Angular Material Checkbox

问题描述

有人可以告诉我，当您单击角材质复选框时，我如何更改圆的颜色.如下图所示(粉红色圆圈)

can someone tell me, how I can change the colour of the round circle when you click the angular material checkbox. Shown in the following image (the pink circle)

这是官网的链接:https://material.angular.io/组件/复选框/概述

感谢您的帮助

推荐答案

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

The checkbox (both the checkmark and the ripple), by default uses the accent color from your theme. You can change it to use the primary color by using the color = "primary" property on the element. If you want to use a custom color (i.e. not from the theme), you'd have to override the CSS manually or create a custom theme.

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

If you only want to override the color of the ripple, you can override the .mat-ripple-element class which is added on the generated ripple element whenever you click the checkbox. Add your desired styles to theme.scss.

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

这是一个例子.

这篇关于从 Angular Material 复选框更改 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！