web-dev-qa-db-ja.com

マットチェックボックスのカスタムカラーは変更できません

プロジェクトにAngularマテリアルを使用していて、マットチェックボックスの色を変更したいが、テーマを使用したくないので、ChromeブラウザーのElementsおよびStylesセクションを使用してトレースした。 mat-checkboxが使用し、これを検出したクラス：「.mat-checkbox-ripple .mat-ripple-element」。

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

だから、これは私のコードです、:: ng-deep、/ deep /を試してみましたが、これらのどれも使用せず、結果は常に同じです。チェックボックスの色は変更されていませんが、「スタイル」では、その色を上書きしました。

enter image description here

enter image description here

ここに私が使用するもののバージョンがあります：

"@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",

どうすれば色を変更できますか？

cssangularangular-material
6
Aleksa Milosevic

Cssを使用して.mat-checkbox-background

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

作業コードを参照

0
לבני מלכה

Styles.scssでグローバルscssを使用してください。これでうまくいくはずです。

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