这应考虑到默认复选框颜色

md-checkbox .md-icon {
    background: green;
md-checkbox.md-default-theme.md-checked .md-icon {
    background: green;
}

点击此处阅读更多信息 角度材料Documentation ](https://material.angularjs.org/latest/CSS/checkbox) [

其中一个 standard 实现这一点的方法是利用/deep/ selector

mat-checkbox {
    color: rgb(0,178,0);
    /deep/ .mat-checkbox-background {
        background-color: rgb(0,178,0);
    /deep/ &.mat-checkbox-focused{
        .mat-ink-ripple{
            background-color: rgba(0, 178, 0, .26);
}

这将允许您覆盖启用了Shadow Dom的组件中的样式。

对于beta.2的角度材料， color 属性应该起作用。

在beta.2之前，它有一些问题。2

请参阅 commit 解决了这个问题。

这个解决方案对我来说效果很好。

​

/deep/.mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #3490d3;
}

​

以下选项在未选中时会使框架保持灰色，但在选中时会更改为自定义颜色：

relevant-scss-file.scss

mat-checkbox {
  &.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background {
   background: rgb(0,178,0);
}

如果你正在使用主题，你不需要添加css，只需添加属性颜色到

Primary

可以使用color属性更改的颜色。默认情况下，复选框使用主题的强调颜色。可以将其更改为'primary‘或'warn’

角度[ Checkbox | Angular Material ](https://material.angular.io/components/checkbox/overview#theming)

因为deep已被弃用。在我看来，正确的方法是使用

encapsulation: ViewEncapsulation.None ..。

例如：

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  encapsulation: ViewEncapsulation.None,
})

然后，您只需更改类

.mat-checkbox-background {
  background-color: green;
}

您只需小心处理全局css内容即可。在SASS中，嵌套类应该正确处理它。

您可以在此处了解更多详细信息： https://stackoverflow.com/a/54672579/783364

默认颜色取决于您选择的主题@import..。

但angular材质也提供了定制主题或定制组件的方法，如更改复选框..。

具体步骤如下：

1.)导入_theming.scss文件

@import "../node_modules/@angular/material/theming";

2.)指定重音颜色，即您想要应用的复选框的颜色，如下所示:-

// customising of the mat-checkbox accordiing Theme. i am using pink indigo theme 
     bydefault so here I am changing the checkbox color from pink to grey.
    $candy-app-primary: mat-palette($mat-indigo);
    // here I am specify the grey instead of Pink.
    $candy-app-accent: mat-palette($mat-grey, 600, 500, 900);
    $candy-app-warn: mat-palette($mat-red);
    // Create the theme object (a Sass map containing all of the palettes).
    $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
    // here I am only calling checkbox mixin because i only want to change the checkbox color     
    @include mat-checkbox-theme($candy-app-theme);

希望能有所帮助。

对于角度材质7，适用于轮廓颜色和内部填充颜色

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element {
    opacity: 0.03 !important;
    background-color: #005691!important;
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: #005691;
  }

Angular 7+

这将适用于checkbox以及初始的波纹颜色。如果只更改复选框的背景，初始的波纹颜色不会更新。这就解决了问题。

SCSS：

::ng-deep .mat-checkbox-checked.mat-accent {
    .mat-checkbox-ripple .mat-ripple-element {
        background-color: $your-color !important;
    .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
        background-color: $your-color;
::ng-deep .mat-checkbox.mat-accent {
    .mat-checkbox-ripple .mat-ripple-element {
        background-color: $your-color !important;
}

这个解决方案对我来说效果很好。

.mat-checkbox-ripple .mat-ripple-element,.mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: $your-color !important;}

对我来说，有效的方法如下：

Check me!

在css中(在我的例子中是sass)：

.#{$wf__ns}checkbox {
  .mat-checkbox-ripple {
    .mat-ripple-element {
      background: $cool-blue !important;
  &.mat-checkbox-checked {
    .mat-checkbox-background {
      background: $cool-blue;
    .mat-checkbox-ripple {
      .mat-ripple-element {
        background: $cool-blue !important;
}

解释：

选中的背景颜色将更改为mat-checkbox-mat内的背景-checkbox- checked。如果要在未选中的情况下修改背景色只需复制该部分并将其复制到mat之外-复选框-选中。

至于波纹类，当您按下按钮时，会发现材质具有动画效果。这个类控制动画的颜色，如果你不改变它，它将保持不变(粉色)。

如果您不通过按下复选框来更改它，您将看到奇怪的粉红色效果。

其他答案对我不起作用，尽管我依靠第一个答案来开发它。

它可能来自我的angular版本，我在下面留下：

Angular CLI: 8.3.25
Node: 13.3.0
Angular: 8.2.14

在angular 9中，一组答案对我很有效。

.mat-checkbox-checked.mat-accent .mat-checkbox-ripple .mat-ripple-element {
  opacity: 0.03 !important;
  background-color: #005691 !important;
.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #005691 !important;
.mat-checkbox-ripple .mat-ripple-element,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: #005691 !important;
}

这就是有效的方法。在我们的JHIPSTER项目中，我们有一个

global.scss ..。如果你有一个全局的，下面是你需要做的。

用类包装您的组件html。例如：

​

​在 global.scss 或者 global.css 像这样编写css/scss ( Im using red to test )：

​

.supplier-details-container .mat-checkbox-ripple .mat-ripple-element,.mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: red !important;
}

​

基本上是使用css层次结构，用来包装组件html的组件类包装原生的角度材料css。

让我知道它是否有效。我们可以调试。

你可以这样改变边框的颜色。(角度)

::ng-deep .mat-checkbox {
    .mat-checkbox-ripple .mat-ripple-element {
        background-color: #07abe9 !important;
    .mat-checkbox-frame {
        border-color: #07abe9 !important;
}

有两种方法(据我所知)可以改变mat-checkbox (angular 9)的背景颜色-

方法1-使用mat-复选框的颜色属性。

Check

限制-通过此方法只能根据角度材质主题使用颜色。

方法2-如果你想给mat提供自定义的颜色--checkbox首先跟踪类，直到你想要改变颜色的目标类。 跟踪嵌套的classes

在你的style.css(全局)文件中像这样写完之后-

第1个复选框

.l0
  .mat-checkbox-checked
  .mat-checkbox-layout
  .mat-checkbox-inner-container
  .mat-checkbox-background {
  background-color: #ffbf00 !important;
}

第二个复选框

.l1
  .mat-checkbox-checked
  .mat-checkbox-layout
  .mat-checkbox-inner-container
  .mat-checkbox-background {
  background-color: #4caf50 !important;