0

我想从默认的角度材质配色方案更改为自定义配色方案。我的问题是,当我这样做时,MatInput 字段在聚焦时停止显示闪烁的光标。我想知道如何使它在单击时恢复为闪烁状态。

主题.scss

@import '~@angular/material/theming';
@include mat-core();

$my-app-primary: mat-palette($mat-grey, 100);
$my-app-accent:  mat-palette($mat-blue, 200);
$my-app-warn:    mat-palette($mat-deep-orange);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);

监管.component.html

 <mat-form-field>
      <input
        matInput
        type="email"
        formControlName="email"
        placeholder="{{ email }}"
        style="outline: none"
      />
      <mat-error *ngIf="form.get('email').invalid"
        >Please enter a valid email.</mat-error
      >
    </mat-form-field>
4

1 回答 1

1

Angular Material Design 适用于主要、重音(又名次要)和警告颜色的调色板。这些是您可以在自定义主题中定义的调色板。每个调色板都有一系列颜色变体(用数字表示,“A”后跟数字,或者简单地“更深”或“更浅”)代表不同的色调。

因此,让我们直奔主题:您为原色选择的颜色变体是:

$my-app-primary: mat-palette($mat-grey, 100);

Angular Material 组件中大量使用了原色,matInput 也是如此。您选择的变体 (100) 太浅,因为数字给出的颜色范围从 50(较浅)到 900(较深),因此您可能不会在屏幕上看到它。选择不同的变体并测试它们是否为您提供所需的颜色。

有关 Angular Material 上的调色板和设计颜色的更多信息,请参见:https ://material.io/design/color/#color-usage-palettes

于 2019-03-20T13:49:55.847 回答