Angular：材料自定义主题不适用于输入字段

Question

我有以下材料自定义 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);

样式正确应用于复选框和单选框，但不适用于输入字段。

这是我定义输入字段的方式：

<md-form-field>
    <input mdInput placeholder="Card holder name">
</md-form-field>

下图显示了红色样式应用于收音机，但输入丢失了样式

如果我使用单行更改细分包含，则@include angular-material-theme($app-theme);红色样式适用于输入，但我的想法是为输入字段使用不同的调色板。

Answer 1

输入字段是<md-form-field>. 在您的自定义 sass 文件中添加以下内容：

@include mat-form-field-theme($app-theme); // Form-Field theme
@include mat-input-theme($app-theme);      // Input Theme