Material 设计 2 自定义 css 组件

Question

我想自定义 css 例如 md-form-field。我知道我可以导入原生 material 主题，但我的调色板中没有白色 https://www.materialpalette.com/

我想更改

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

变白#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);

有什么想法吗？

Answer 1

您可以定义自己的调色板。

@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);

但是，如果您只想更改 css 一个控件并为其余控件保留相同的主题，那么我建议您仅覆盖该控件样式。

Material 设计 2 自定义 css 组件

Material design 2 customize the css component

angular-material

angular2-forms

angular-material2