从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/组件/复选框/概述

Here is the link from the official webpage: https://material.angular.io/components/checkbox/overview

感谢帮助

推荐答案

默认情况下，复选框(选中标记和波纹)均使用主题中的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屋！