web-dev-qa-db-ja.com

Angular Materialチェックボックスの色をカスタムカラーで変更できますか？

私はこれを試みていますが、プライマリに変更するか警告することしかできないようです。

angularangular-material
14
Kristina Barutska

Angular Material要素の色を制御する適切な方法は、異なるパレットを使用することですが、機能は制限されています。さらに制御したい場合は、カスタムCSSを追加できます。ほとんどの場合、 ::ng-deepを使用してスタイルを強制的に適用するには、たとえば次のようにします。

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

これが [〜＃〜] demo [〜＃〜] で、境界線と背景の色を変更しましたチェックしたとき。この方法に従って、必要なスタイルを実装できます。

::ng-deepに精通しておらず、よくわからない場合は、必要なときに [〜＃〜] this [〜＃ 〜] 短い答え。

アップデート1

カプセル化を無効にする別の方法があります（@Venturaに感謝）。存在する権利がありますが、カプセル化を無効にする場合は、スタイルシートと混同しないように注意してください。これは、CSSに関するデフォルトのAngularロジックから期待される動作とは異なるためです。

詳細情報： https://coryrylan.com/blog/css-encapsulation-with-angular-components

SOの答え： https://stackoverflow.com/a/54981478/6053654

アップデート2

このメソッドは非推奨です。詳細は [〜＃〜]こちら[〜＃〜] または [〜＃〜]ここ[〜＃〜] 。

26
Commercial Suicide

あなたはこれを使うかもしれません：

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

このコードを使用して、ボックスとチェックアイコンを変更できます。

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

Angular Material Version： "7.0.0"

1
Mohammad Jamal Dashtaki

あなたのCSSでこれを使用してください。

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

:: ng-deepを使用する必要があります。そうしないと機能しません。

あなたのHTMLでは、このように使用し、

<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

これらの回答は、不確定なボックスに対しては機能しませんでした。以下はしました：

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