web-dev-qa-db-fra.com

Puis-je changer la couleur de Angular Material checkbox with some custom color and how?

J'essaie de le faire, mais il semble qu'il ne soit possible de le changer qu'en primaire ou en avertissant.

angularangular-material
14
Kristina Barutska

La bonne façon de contrôler les couleurs des éléments Angular Material est d'utiliser des palettes différentes, mais la fonctionnalité est limitée. Si vous voulez plus de contrôle, vous pouvez ajouter du CSS personnalisé et, dans la plupart des cas, vous aurez besoin utiliser ::ng-deep pour forcer l'application de vos styles, par exemple:

::ng-deep .mat-checkbox .mat-checkbox-frame {
  border-color: Violet;
}

Voici une démo [~ # ~] [~ # ~] , où j'ai changé la couleur de la bordure et du fond quand il a vérifié. Vous pouvez suivre cette méthode pour implémenter le style de votre choix.

Si vous n'êtes pas familier avec ::ng-deep et ne comprends pas vraiment, quand vous en avez besoin, vous pouvez regarder à travers [~ # ~] ce [~ # ~] réponse courte.

MISE À JOUR 1

Il existe un autre moyen via la désactivation de l'encapsulation (grâce à @Ventura). Il a le droit d'exister, mais faites attention si vous décidez de désactiver l'encapsulation, ne confondez pas avec les feuilles de style, car il se comporte différemment de ce que vous attendez de la valeur par défaut Angular concernant CSS.

Pour plus d'informations: https://coryrylan.com/blog/css-encapsulation-with-angular-components

Réponse SO: https://stackoverflow.com/a/54981478/6053654

MISE À JOUR 2

La méthode est obsolète, voir plus d'informations [~ # ~] ici [~ # ~] ou [~ # ~] ici [~ # ~] .

26
Commercial Suicide

Vous pouvez utiliser ceci:

::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-accent .mat-pseudo-checkbox-checked, .mat-accent .mat-pseudo-checkbox-indeterminate, .mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate {
    background-color: red !important; /* Red background for example */
}
7
Prachi

Vous pouvez utiliser ce code pour changer sa case et son icône de contrôle:

/deep/ .mat-checkbox.mat-accent {
  .mat-checkbox-frame {
    border: 1px solid dodger-blue;
  }

  &.mat-checkbox-checked .mat-checkbox-background {
    background-color: white;
    border: 1px solid dodger-blue;
  }

  .mat-checkbox-checkmark-path {
    stroke: dodger-blue !important;
  }
}

Version de matériau angulaire: "7.0.0"

1
Mohammad Jamal Dashtaki

Utilisez-le sur votre CSS.

::ng-deep .mat-primary .mat-pseudo-checkbox-checked {
    background: red;
}

Vous devez utiliser :: ng-deep sinon cela ne fonctionnera pas.

Sur votre Html, utilisez comme ceci,

<mat-form-field>
  <mat-select placeholder="values" [formControl]="val" multiple>
    <mat-option *ngFor="let v of values" [value]="v">{{v.text}}</mat-option>
  </mat-select>
</mat-form-field>
0
Abdus Salam Azad

Ces réponses n'ont pas fonctionné pour moi pour les boîtes indéterminées. Ce qui suit a fait:

::ng-deep .mat-checkbox-checked .mat-checkbox-background,
::ng-deep .mat-checkbox-indeterminate .mat-checkbox-background {
  background-color: #222d32 !important;
}
0
aycanadal