Question

我使用angular-material2的复选框。目前复选框的默认颜色为紫色看起来他们已经更改了＆＃34; primary＆＃34;的复选框的默认颜色。重音有没有办法在没有覆盖css的情况下获得＆＃34;主要＆＃34;（绿色）颜色而不是紫色。
我试过给color =＆＃34; primary＆＃34;然而，那并没有奏效。

代码：<md-checkbox></md-checkbox>

导入声明：

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

Plunker http://plnkr.co/edit/sFC0kfdzj7fxtUC3GXdr?p=preview

Answer 1

One of the standard ways to do this is to utilize the /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);
        }
    }
}

That will allow you to override styles in components where Shadow Dom is enabled.

Answer 2

如果您使用主题，则不必添加CSS，只需将属性颜色添加到<mat-chechkbox>

<mat-checkbox color="primary">Primary</mat-checkbox>

可以使用color属性更改a的颜色。默认情况下，复选框使用主题的强调色。可以将其更改为“主要”或“警告” Checkbox | Angular Material

Answer 3

此解决方案对我来说很好

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

Answer 4

对于Angular Material 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;
  }

Answer 5

这应该处理默认的复选框颜色

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

在Angular Material Documentation

了解更多内容

Answer 6

这对 Angular 10 对我有用：在您的 styles.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;
}

Answer 7

（我知道）有两种方法可以更改mat-checkbox（9号角）的背景颜色-

方法1-通过使用mat-checkbox的color属性。

spring:
  cloud.stream:
    bindings:  
      input-channel:
        content-type: application/*+avro
        destination: "topic-name"
        group: "group-name"
        consumer:
          partitioned: true
          concurrency: 3
          max-attempts: 1
          use-native-decoding: true
    kafka:
      binder:
        configuration:
          key.serializer: org.apache.kafka.common.serialization.StringSerializer
          value.serializer: io.confluent.kafka.serializers.KafkaAvroSerializer
          key.deserializer: org.apache.kafka.common.serialization.StringDeserializer
          value.deserializer: io.confluent.kafka.serializers.KafkaAvroDeserializer

限制-通过这种方法，只能根据棱角材质主题使用颜色。

方法2-如果要为自定义颜色赋予mat-复选框，请先跟踪类，直到要更改颜色的目标类。 tracking of nested classes

之后，在您的style.css（global）文件中这样写-

第一个复选框

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

结果-different color for different mat-checkbox

Answer 8

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

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

Answer 9

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

let lastId = results.insertId

                    let orderedProductSql = 'INSERT INTO orderedproducts (order_id, product_id, quantity) VALUES (?)'

                    var testData = [
                        {
                            productId: 1,
                            quantity: 2
                        },
                        {
                            productId: 1,
                            quantity: 3
                        },
                        {
                            productId: 1,
                            quantity: 3
                        },
                    ]

                    let values = testData.reduce((o, a) => {
                        let ini = []
                        ini.push(lastId)
                        ini.push(a.productId)
                        ini.push(a.quantity)
                        o.push(ini)
                        return o
                    },[])

                    connection.query(orderedProductSql, [values], (err, results) => {
                        if (err)    {
                            return connection.rollback(_ => {
                                throw err
                            })
                        }

在CSS（或我的情况下为sass）中：

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

说明：

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

关于波纹类别，事实证明，当您按下按钮时，材质具有动画效果。该类控制动画的颜色，如果不进行更改，它将保持不变（粉红色）。

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

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

下面可能是我的角度版本中的内容：

.#{$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;
      }
    }
  }
}

Answer 10

使用Angular Material的beta.2，color属性应该有效。

在测试之前它存在一些问题。

请参阅解决该问题的commit。

Answer 11

Angular 7 +

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

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

Answer 12

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

但是棱角分明的材质还提供了自定义主题或自定义组件的方法，例如更改复选框的颜色。

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

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

希望这会有所帮助。

Answer 13

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

.mat-checkbox-checked.mat-primary .mat-checkbox-background, .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background{
      background-color: $your-color!important;
}

Answer 14

因为不推荐使用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

Answer 15

答案在角度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;
}

Answer 16

这是可行的。在我们的JHIPSTER项目中，我们有一个global.scss。如果您有全局对象，这就是您需要做的。

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

<div class="supplier-details-container">
  <!-- rest of your html here -->
</div>

在global.scss或global.css中像这样（Im using red to test）写下您的CSS / scss：

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

基本上使用css层次结构将原始角形材料css与用于包装组件html的组件类一起包装。

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

Answer 17

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

relevant-scss-file.scss

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

Answer 18

这个解决方案适合我

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

角度材质更改复选框颜色

18 个答案: