При переходе от темы по умолчанию к пользовательской теме курсор удаляется из MatInput, Angular 6

Question

Я хотел изменить цветовую схему углового материала по умолчанию на собственную. Моя проблема в том, что когда я это сделал, поле 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);

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

Answer 1

Angular Material Design работает с палитрами для основных, акцентных (или второстепенных) и предупреждающих цветов. Это те палитры, которые вы можете определить в своей пользовательской теме. Каждая палитра имеет ряд цветовых вариантов (представленных числами, "A", за которыми следуют цифры, или просто "темнее" или "светлее"), которые представляют разные цветовые тона.

Итак, давайте перейдем к сути: вариант цвета, который вы выбрали для основного цвета:

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

Основной цвет часто используется в компонентах Angular Material, и это также относится к matInput. Выбранный вами вариант (100) слишком светлый, поскольку цвета, заданные числами, варьируются от 50(светлее) до 900(темнее), поэтому вы, вероятно, не увидите его на экране. Выберите другой вариант и проверьте, дают ли они нужный вам цвет.

Дополнительную информацию о палитрах и цветах дизайна углового материала можно найти по адресу: https://material.io/design/color/