素材デザイン2はCSSコンポーネントをカスタマイズします

Question

例として、CSSのmd-form-fieldをカスタマイズしたいと思います。 私はネイティブの材料のテーマをインポートすることができます知っているが、私は、私は白#FFFへ

@import '~@angular/material/theming'; 
@include mat-core(); 
$primary: mat-palette($mat-orange, 800); 
$accent: mat-palette($mat-light-blue, 600, 100, 800); 
$warn: mat-palette($mat-red, 600); 
$theme: mat-light-theme($primary, $accent, $warn); 
@include angular-material-theme($theme); 

どれを

$primary: mat-palette($mat-orange, 800); 
$accent: mat-palette($mat-light-blue, 600, 100, 800); 

を変更したいパレットでhttps://www.materialpalette.com/

を白い色を持っていけませんアイデア？

Answer 1

独自のパレットを定義することができます。あなたが唯一のコントロールのCSSを変更し、残りのコントロールのために同じテーマを維持したい場合は

@import '~@angular/material/theming'; 
@include mat-core(); 

// Your custom palette 
// 
$mat-white: (100: #FFF, 200: #FFF, 300: #FFF, 400: #FFF, 500: #FFF, 600: #FFF, 700: #FFF, 
       800: #FFF, 900: #FFF, A100: #FFF, A200: #FFF, A400: #FFF, A700: #FFF, 
       contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 
          300: $black-87-opacity, 400: $black-87-opacity, 
          500: white, 600: white, 700: white, 800: white, 900: white, 
          A100: $black-87-opacity, A200: $black-87-opacity, 
          A400: white, A700: white,)); 
// 

$primary: mat-palette($mat-white, 800); 
$accent: mat-palette($mat-white, 600, 100, 800); 
$warn: mat-palette($mat-red, 600); 
$theme: mat-light-theme($primary, $accent, $warn); 
@include angular-material-theme($theme); 

しかし、その後、私は唯一のスタイル制御を行うことオーバーライドすることをアドバイスします。