Angular material 角度材质更改复选框颜色

我正在使用angular-material2的复选框。当前复选框的默认颜色为紫色。
看起来他们已将复选框的默认颜色从“主”更改为重音。
有没有一种方法可以在不覆盖css的情况下获得“主”（绿色）颜色而不是紫色。
我尝试将color=“primary”设置为，但没有成功

代码：

进口声明：

import {MdCheckbox} from '@angular2-material/checkbox';

---

Plunker

这应该考虑默认的复选框颜色

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

请在此处阅读更多信息，方法之一是使用/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);
        }
    }
}

---

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

对于角度材质的beta.2，颜色属性应该可以工作

在测试版之前，它有一些问题

请参阅解决该问题的方法

---

这个解决方案对我很有效

/deep/.mat-checkbox-checked.mat-accent.mat-checkbox-background、.mat-checkbox-undeterminate.mat-accent.mat-checkbox-background{
背景色：#3490d3；
}

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

相关的scss文件.scss

---

如果使用主题，则不必添加css，只需将属性颜色添加到

Primary

可以使用“颜色”属性更改

的颜色。默认情况下，复选框使用主题的强调色。这可以更改为“主”或“警告”

---

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

封装：viewenclosuration.None

例：

那你只需要换个班

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

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

---

您可以在此处查看更多详细信息：

默认颜色取决于导入的主题

但角度材质也提供了自定义主题或自定义组件的方法，如更改复选框的颜色

执行此操作的步骤如下：-

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

角度7+

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

SCSS：

---

这个解决方案对我很有效

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

---

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

<mat-checkbox class="tn-checkbox">Check me!</mat-checkbox>

说明：

选中的背景色将更改为mat checkbox checked内的mat checkbox background如果要在未选中背景色时修改背景色只需复制该部分并将其复制到选中的mat复选框之外即可

对于ripple类，当您按下按钮时，材质会显示动画。该类控制动画的颜色，如果不进行更改，它将保持不变（粉红色）

如果不按复选框进行更改，您将看到奇怪的粉红色效果

其他答案对我来说并不适用，尽管我依靠第一个答案来开发它

可能是因为我的angular版本，我在下面留下：

Angular CLI: 8.3.25
Node: 13.3.0
Angular: 8.2.14

---

在第九章中，一组答案对我起了作用

.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。例如：

---

您可以通过这种方式更改边框的颜色。（角度）

有两种方法（我知道）可以更改mat复选框（angular 9）的背景色-

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

       <mat-checkbox
          id="{{ subtask.name }}"
          [color]="accent"
        >
          Check
        </mat-checkbox>

第二个复选框

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

---

结果-

这对我的角度10有效： 在您的样式中。scss：

//更改背景色

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #1f45cc;
}

//更改选中和未选中案例的边框颜色

.mat-checkbox-frame {
  border-color: #1f45cc;
}

---

这适用于角材质1.8。我的问题是关于材料的。改变css是一种方法，但我正在寻找一种不改变/覆盖css的方法，因为angular-material2本身有很多主题。我想要一种在不覆盖css的情况下使用现有主题的方法。如果我错了，请纠正我，但我认为

Angular Material的最新版本是1.0.8

。是的，你是正确的。发布的版本是1.0.8。但angular-material2是alpha版本，尚未发布。angular-material2代表angular2。这是迄今为止最好的答案。谢谢这并没有帮助，因为人们不想也不应该仅仅为了一个组件的颜色而改变整个主题。这是正确的答案。但是，我会删除不透明度，因为它会留下一个褪色的标记。此外，这不会改变初始涟漪的颜色。谢谢，它对我有效，但对于angular 9，我们必须删除“：：ng deep”才能正常工作。我相信，ng-deep将被降级。。。我在附近有工作，我把它贴在这里的某个地方。希望对你有所帮助。这也适用于Angular Material 11.x。很好的提示，有趣的是，你的样品还包括了我想要的确切颜色设置！因此，如果我想使用我们公司的颜色，在主题之外，我该如何改变颜色？工作得很有魅力…非常感谢！

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

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

       <mat-checkbox
          id="{{ subtask.name }}"
          [color]="accent"
        >
          Check
        </mat-checkbox>

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

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #1f45cc;
}

.mat-checkbox-frame {
  border-color: #1f45cc;
}