web-dev-qa-db-fra.com

la couleur personnalisée de mat-checkbox ne peut pas être modifiée

J'utilise Angular Material pour mon projet et je veux changer la couleur de mat-checkbox, mais je ne veux pas utiliser le thème, donc j'ai visiblement utilisé les sections Elements et Styles dans mon Chrome Navigateur et classes tracées utilisées par mat-checkbox et trouvé ceci: ".mat-checkbox-ripple .mat-ripple-element".

::ng-deep .mat-checkbox-ripple .mat-ripple-element {
  background-color: black!important;
}

Donc, c'est mon code, j'ai essayé :: ng-deep,/deep/et sans aucun de ceux-ci, et le résultat est toujours le même, la couleur de la case à cocher n'est pas modifiée, mais dans "Styles" je peux clairement voir qu'il dit que J'ai écrasé sa couleur.

enter image description here

enter image description here

Voici les versions des choses que j'utilise:

"@angular/animations": "^7.1.4",
"@angular/cdk": "^7.2.0",
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/forms": "~7.1.0",
"@angular/material": "^7.2.0",
"@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0",

Comment puis-je changer de couleur?

cssangularangular-material
6
Aleksa Milosevic

Utilisez css pour .mat-checkbox-background

::ng-deep .mat-checkbox-checked.mat-primary .mat-checkbox-background, .mat-checkbox-indeterminate.mat-primary .mat-checkbox-background{
  background: pink!important;
}

Voir code de travail

0
לבני מלכה

Utilisez global scss dans styles.scss et cela devrait fonctionner.

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
    background-color: black;
}
0
Mr. Dang