Блог

Я хочу изменить цвет шрифта опции mat, отображаемой на панели автозаполнения.

Я определил стиль внутри корневого стиля.css

 ::ng-deep .mat-option-text {
  color: red !important;
}

 

Однако, когда я устанавливаю свойство color в панели элементов просмотра браузера, я вижу изменение

template.html Какие изменения я должен внести в класс шаблона или style.css, чтобы изменить цвет шрифта mat-опций.

 <label>Search names</label>
<input type="text"
       placeholder="search name"
       aria-label="Number"
       matInput
       [formControl]="myControl"
       [matAutocomplete]="auto">
     
<mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
      {{option}}
    </mat-option>
</mat-autocomplete>
 

шаблон.ts

 import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-matautocom',
  templateUrl: './matautocom.component.html',
  styleUrls: ['./matautocom.component.css']
})
export class MatautocomComponent implements OnInit {

  names: string[] = ['ghui', 'ustu', 'caty','momo', 'rekh', 'john', 'kemp'];
  myControl: FormControl = new FormControl();
  filteredOptions: Observable<string[]> | undefined;
  constructor() { }

  ngOnInit(): void {
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    );
  }
  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
 
     return this.names.filter((option) =>  {
       console.log(filterValue)
      option.toLowerCase().includes(filterValue);
      return option;
    })   
   
  }

}


 

Попробуйте это

::ng-глубокий ввод.мат-входной элемент { цвет: красный; }

или это

::ng-глубокий .коврик-опция.коврик-активный { цвет: красный; }

Глобальный style.css-это просто простая, не угловая или, по крайней мере, неинкапсулированная таблица стилей. Вы должны удалить ::ng-deep , чтобы это сработало.

Решение 1. Удалите ::ng-deep в глобальном стиле.css.

стиль.css (глобальный)

 .mat-option-text {
  color: red !important;
}
 

Образец решения 1 на СтекбЛитце

Решение 2. Поместите правило стиля в файл CSS для MatautocomComponent .

matautocom.компонент.css

 ::ng-deep .mat-option-text {
  color: red !important;
}
 

Образец решения 2 на СтекбЛитце