Material design 2 自定义css组件

Posted 2023-03-13

【中文标题】Material design 2 自定义css组件

【英文标题】：Material design 2 customize the css component

【发布时间】：2018-02-19 11:46:11

【问题描述】：

例如，我想自定义 css 一个 md-form-field。 我知道我可以导入原生材质主题，但我在调色板中没有白色 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);

有什么想法吗？

【参考方案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 并为其余控件保持相同的主题，那么我建议您仅覆盖该控件样式。

【讨论】：

另一种方法是使用您的不同主题作为$theme 的参数来执行@import mat-form-field-theme($theme)。