css класс не вступает в силу после изменения nativeElement.className

Question

Итак, я пишу приложение angular и пытаюсь изменить стиль поля формы.

HTML:

<mat-form-field  #matFormField class="example-full-width" >
     <input #autocompleteInput type="text" placeholder="Enter {{searchBy.value}}" aria-label="Number" matInput [formControl]="myControl"
         [matAutocomplete]="auto"  (keyup.enter)="onEnter()">
     <fa-icon  [icon]="faSearch"></fa-icon>
     <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
         <mat-option *ngFor="let option of autocompleteList" [value]="option" (onSelectionChange)="autocompleteSelected($event)">
             {{option[searchBy.value]}}
         </mat-option>
     </mat-autocomplete>
</mat-form-field>

Машинопись:

@ViewChild('matFormField', { static: false, read: ElementRef}) formField: ElementRef;

ngAfterViewInit(): void {
  this.formField.nativeElement.children[0].children[0].children[0].className = 'mat-form-field-infix-fix';
}

S CSS:

mat-form-field {
  width: 100%;
}

.mat-form-field-infix-fix {
  display: flex;
  position: relative;
  flex: auto;
  min-width: 0;
}

fa-icon {
  float: right;
}

, и я вижу, что className определенно применяется:

, но по некоторым причинам css не является:

Кто-нибудь знает, что здесь происходит?

Answer 1

Я полагаю, что вы столкнулись с обсуждаемой инкапсуляцией здесь . Примечательные моменты:

Как обсуждалось ранее, стили компонента CSS инкапсулированы в представление компонента и не влияют на остальную часть приложения.

И ранее обсуждение в разделе «Область применения стилей»:

Стили, указанные в метаданных @Component, применяются только в шаблоне этого компонента.

Они не наследуются ни компонентами, вложенными в шаблон, ни любым содержимым, проецируемым в компонент.

Итак, чтобы ваш css мог применить стиль вложенных компонентов, у вас есть несколько вариантов:

1. Изменить инкапсуляцию представления настройка
2. Поместите этот стиль в глобальную таблицу стилей вашего приложения
3. В компоненте css используйте специальные правила прокалывания , такие как ::ng-deep (полезно, но Angular команда устарела без хорошей альтернативы)