angulaire de matériau à changement de case de couleur

Je suis en utilisant la case du angulaires-material2. Actuellement, la couleur par défaut de la case à cocher est à venir comme la couleur pourpre.
On dirait qu'ils ont changé de couleur par défaut de la case à cocher de "primaires" à l'accent.
Est-il un moyen d'obtenir "primaire"(vert) couleur de pourpre sans écraser css.
J'ai essayé de donner color="primaire", mais qui n'a pas travaillé.

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

Instruction d'importation:

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

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

OriginalL'auteur Krishna | 2016-05-20

angular-material

L'un des standard façons de le faire est d'utiliser le /de profondeur/sélecteur de

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

Qui vous permettra de remplacer les styles dans les composants de l'Ombre Dom est activé.

OriginalL'auteur chimon2000

4

Vous n'avez pas à ajouter des css si vous r'aide de thème, il suffit d'ajouter l'attribut de couleur à <mat-chechkbox>
```
<mat-checkbox color="primary">Primary</mat-checkbox>
```
La couleur de l'un peut être modifié à l'aide de la couleur à la propriété. Par défaut, les cases à cocher utiliser le thème de la couleur d'accent. Ceci peut être changé pour "primaire" ou "prévenir"
Case À Cocher | Angulaire Du Matériel

OriginalL'auteur Khan Abdulrehman
2

Cela devrait prendre soin de la case à cocher par défaut la couleur
```
md-checkbox .md-icon {
    background: green;
}
md-checkbox.md-default-theme.md-checked .md-icon {
    background: green;
}
```
lire plus ici à Angulaire Du Matériel De Documentation

C'est pour angulaires-le matériel 1.8. Ma question est pour material2. Changement de css est l'un de la voie, mais je suis à la recherche d'un moyen de le faire sans modifier/prépondérant css parce que angulaires-material2 lui-même a beaucoup de nombreux thèmes. Je veux un moyen d'utiliser le thème existant sans écraser css.
Corrigez-moi si je me trompe mais je pense que la version la plus récente pour Angular-Material is 1.0.8.
Oui, vous avez raison. Publié version 1.0.8. Mais angulaires-material2 est en version alpha et n'est pas encore publié. angulaires-material2 est pour angular2.

OriginalL'auteur Pirate X
1

Avec la bêta.2 Angulaire du Matériel, la color attribut de travail.

Il y avait quelques problèmes avec elle avant de la bêta.2

Voir le s'engager qui fixe cette question.

OriginalL'auteur DevVersion
0

Le suivant sera de garder la trame de gris lorsque cette option est décochée, mais le changement de couleur personnalisée lorsque la case est cochée:

pertinentes-scss-fichier.scss
```
mat-checkbox {
  &.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background {
   background: rgb(0,178,0);
  }
}
```
OriginalL'auteur Omer Shukar
0

Depuis de profondeur est obsolète. À mon avis, la bonne façon de le faire est d'utiliser encapsulation: ViewEncapsulation.None.

ex:
```
@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  encapsulation: ViewEncapsulation.None,
})
```
Ensuite, vous avez juste besoin de changer la classe
```
.mat-checkbox-background {
  background-color: green;
}
```
Vous avez juste besoin d'être prudent de traiter avec le global css choses. Dans SASS classes imbriquées doit le gérer correctement.

Vous pouvez avoir plus de détails ici: https://stackoverflow.com/a/54672579/783364

OriginalL'auteur Ventura

Vous devez vous connecter pour publier un commentaire.