我有以下材质自定义sass文件:
@import '../node_modules/@angular/material/theming';
@include mat-core();
$app-primary: mat-palette($mat-red, 700, 800);
$app-accent: mat-palette($mat-red, 700, 800);
$app-warn: mat-palette($mat-red, 700, 800);
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
$app-input-primary: mat-palette($mat-red, 100, 200);
$app-input-accent: mat-palette($mat-red, 100, 200);
$app-input: mat-light-theme($app-input-primary, $app-input-accent);
@include mat-core-theme($app-theme);
@include mat-checkbox-theme($app-theme);
@include mat-radio-theme($app-theme);
@include mat-input-theme($app-theme);
样式正确应用于复选框和radiobox,但不适用于输入字段。
这是我定义输入字段的方式:
<md-form-field>
<input mdInput placeholder="Card holder name">
</md-form-field>
如果我使用单行@include angular-material-theme($app-theme);
更改细分包含,则红色样式适用于输入,但我的想法是为输入字段设置不同的调色板。
答案 0 :(得分:2)
输入字段是<md-form-field>
的一部分。在自定义sass文件中添加以下内容:
@include mat-form-field-theme($app-theme); // Form-Field theme
@include mat-input-theme($app-theme); // Input Theme
答案 1 :(得分:0)
请注意,如果您使用 @use
和 as mat
,例如:@use '~@angular/material' as mat;
那么你需要使用
@include mat.core-theme($default-theme);
@include mat.button-theme($default-theme);
@include mat.form-field-theme($default-theme); // Form-Field theme
@include mat.input-theme($default-theme); // Input Theme
@include mat.checkbox-theme($default-theme); // Checkbox Theme