如何自定义角材料表单字段组件？

Question

我刚开始使用角形材料，但是在使材料组件按我喜欢的方式工作时遇到了问题。

我做了一个自定义主题，但是仍然有些我不喜欢的东西。

这是我的自定义主题：

@include mat-core();
$DigitalSignageApp-primary: mat-palette($mat-pink);
$DigitalSignageApp-accent: mat-palette($mat-gray, A200, A100, A400);
$DigitalSignageApp-warn: mat-palette($mat-red);
$DigitalSignageApp-theme: mat-dark-theme($DigitalSignageApp-primary, $DigitalSignageApp-accent, $DigitalSignageApp-warn);

@include angular-material-theme($DigitalSignageApp-theme);

我想在项目中使用表单字段，而HTML格式为：

<mat-form-field appearance="outline">
          <mat-label>Email</mat-label>
          <input matInput placeholder="Email">
        </mat-form-field>
        <mat-form-field appearance="outline">
          <mat-label>Password</mat-label>
          <input matInput type="password" placeholder="Password">
        </mat-form-field>

这是布局的样子：

当我专注于输入字段时：

我希望文本和边框具有白色（因为它更具可读性）

Answer 1

这是使用[appearance]="'outline'"

的有效示例

https://stackblitz.com/edit/angular-cvq3kq-g56tez

随意将CSS规则提取到您的主题，我在styles.css文件中使用它只是出于演示目的。基本上，您需要定位： .mat-form-field-outline-end和.mat-form-field-outline-start的边界和占位符，您需要定位::placeholder伪