Если вы хотите настроить компоненты материала Angular и предоставить свои собственные стили для заполнителя mat-chip, у меня есть следующие предложения. Вы можете использовать один из них.
1) Перезаписать классы на вашем основном style.css (или style.scss, в зависимости от того, что вы используете). Если вам интересно, это тот, который находится на том же уровне каталогов, что и ваш index.html, main.ts, package.json и т. Д. Вам может понадобиться добавить объявление !important
.mat-form-field-label {
color:blue!important;
}
2) Используйте ViewEncapsulation:None. Это удаляет всю инкапсуляцию, так что правила CSS будут иметь глобальный эффект.
В ваш component.ts вам нужно будет импортировать ViewEncapsulation, а затем выбрать None, когда вы предоставите определения для инкапсуляции
import { .. ViewEncapsulation } from '@angular/core';
.
.
@Component({
selector: 'chips-autocomplete-example',
templateUrl: 'chips-autocomplete-example.html',
styleUrls: ['chips-autocomplete-example.css'],
encapsulation: ViewEncapsulation.None
})
И на вашем component.css,
.mat-form-field-label {
color:blue!important;
}
3) Настройка директивы MatPlaceholder (переопределение заполнителя Angular Material css без использования! Важный) [EDIT]
Согласно API-интерфейсу Angular Material Form Field получается, что директива-заполнитель доступна после того, как мы импортировали этот модуль.
В вашем component.html включите директиву <mat-placeholder> с пользовательским классом в <mat-form-field> и удалите заполнитель из <input> в <mat-chip-list>
<mat-form-field class="example-chip-list">
<mat-placeholder class="placeholder">Search</mat-placeholder>
<mat-chip-list #chipList>
<mat-chip
*ngFor="let fruit of fruits"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(fruit)">
{{fruit}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input
#fruitInput
[formControl]="fruitCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
{{fruit}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
И в вашем component.css определите класс .placeholder (назначенный директиве mat-placeholder) с вашими пользовательскими свойствами CSS.
.placeholder {
color: green
}