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

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

0 голосов
/ 19 марта 2019

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

1 Ответ

1 голос
/ 20 марта 2019

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

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

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

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

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

...