Angular 从默认主题更改为自定义主题将从MatInput中删除光标,如图6所示

Angular 从默认主题更改为自定义主题将从MatInput中删除光标,如图6所示,angular,sass,mat-input,Angular,Sass,Mat Input,我想从默认的角度材质颜色方案更改为自定义颜色方案。我的问题是,当我这样做时,MatInput字段在聚焦时停止显示闪烁的光标。我想知道我怎样才能让它在点击时恢复闪烁状态 theme.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

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

theme.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>

请输入有效的电子邮件。

棱角材质设计与主色调、强调色(又称第二色调)和警告色调色板配合使用。这些是可以在自定义主题中定义的选项板。每个调色板都有一系列表示不同色调的颜色变体(用数字表示,'a'后跟数字,或者简单地说是'深'或'浅')

让我们直截了当地说:您为原色选择的颜色变体是:

$my-app-primary: mat-palette($mat-grey, 100);
原色在角材质组件中使用较多,matInput也是如此。您选择的变体(100)太浅,因为数字给出的颜色范围从50(较浅)到900(较深),因此您可能无法在屏幕上看到它。选择不同的变体并测试它们是否为您提供了所需的颜色


有关角材质的调色板和设计颜色的更多信息,请参见:

Ohh好的,所以不是因为它“删除了光标”,而是因为它太轻,我看不见它。