angular-material change checkbox color

问题

I'm using checkbox of angular-material2. Currently the default color of checkbox is coming as purple color.
Looks like they have changed default color of checkbox from "primary" to accent.
Is there a way to get "primary"(green) color instead of purple without overriding css.
I tried giving color="primary" to but that didn't worked.

Code : <md-checkbox></md-checkbox>

Import statement:

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

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

回答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.

回答2:

You don't have to add css if you'r using theme, just add attribute color to <mat-chechkbox>

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

The color of a can be changed by using the color property. By default, checkboxes use the theme's accent color. This can be changed to 'primary' or 'warn' Checkbox | Angular Material

回答3:

Default color depends upon the theme which you @import.

But angular material also provide way to customize the theme or for customizing the components like changing the color of checkbox.

Steps of doing this as follow :-

1.) Import the _theming.scss file

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

2.) Specify the accent color i.e. color of check box you want to apply like below :-

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

Hope it will help.

回答4:

This should take care of the default checkbox color

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

read more here at Angular Material Documentation

回答5:

For Angular Material 7, works for outline color and inside filled in color

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

回答6:

With beta.2 of Angular Material, the color attribute should work.

There were some issues with it before beta.2

See the commit that fixed that issue.

回答7:

The following will keep frame grey when unchecked but change to custom color when checked:

relevant-scss-file.scss

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

回答8:

this solution works well for me

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

回答9:

Since deep is deprecated. In my view the right way to do it is using encapsulation: ViewEncapsulation.None.

ex:

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

Then you just need to change the class

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

You just need to be careful to deal with global css stuff. In SASS nested classes should handle it properly.

You can have more details here: https://stackoverflow.com/a/54672579/783364

回答10:

Angular 7+

This will work for checkbox as well as the initial ripple color. If you just change the background for the checkbox, the initial ripple color won't update. This resolves the issue.

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

来源：https://stackoverflow.com/questions/37339735/angular-material-change-checkbox-color

标签

angular-material