javascript - Angular/Material 中的样式化 mat-form-field 输入

Question

我有一个带有输入的 mat-form-field，我想为其添加自定义样式，但是我在 Angular Material 官方网站上找不到任何关于此的文档。

我的最终目标是:

• 更改输入框选中后的下划线颜色
• 删除 float 标签(如果可能 - 我知道这是一项功能但现在已弃用)。

我目前还不是最擅长使用 Angular，但如果 JS 需要更改，那么我总能尽我最大的努力。

我只需要一点指导。

当前代码:

<form class="search-form">
  <mat-form-field class="example-full-width">
    <input class="toolbar-search" type="text" matInput>
    <mat-placeholder>Search</mat-placeholder>
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

当前的 CSS:

// Change text colour when inputting text
.toolbar-search, mat-placeholder {
  color: white;
}

// Changes the underline and placeholder colour before input is selected
/deep/ .mat-input-underline {
    background-color: white;
}

Answer 1

使用scss改变 Material 输入的样式:

标准:

::ng-deep .mat-form-field {
    .mat-input-element {
        color: slategray;
    }
    .mat-form-field-label {
        color: slategray;
    }
    .mat-form-field-underline {
        background-color: slategray;
    }
    .mat-form-field-ripple {
        background-color: slategray;
    }
    .mat-form-field-required-marker {
        color: slategray;
    }
}

重点:(选中时)

::ng-deep .mat-form-field.mat-focused {
    .mat-form-field-label {
        color: #ff884d;
    }
    .mat-form-field-ripple {
        background-color: #ff884d;
    }
    .mat-form-field-required-marker {
        color: #ff884d;
    }
    .mat-input-element {
        color: #ff884d;
    }
}

无效:

::ng-deep .mat-form-field.mat-form-field-invalid {
    .mat-input-element {
        color: #ff33cc;
    }
    .mat-form-field-label {
        color: #ff33cc;
        .mat-form-field-required-marker {
            color: #ff33cc;
        }
    }
    .mat-form-field-ripple {
        background-color: #ff33cc;
    }
}

DEMO

您还可以使用 ViewEncapsulation.None 来避免 ::ng-deep，它已弃用:

import { ViewEncapsulation } from '@angular/core';

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})