javascript - 如何更改 matautocomplete 选项的字体颜色

Question

我想更改自动完成面板内显示的 mat-option 的字体颜色。

我在根 style.css 中定义了样式

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

但是，当我在浏览器检查元素面板中设置颜色属性时，我看到了变化

template.html 我应该在模板类或 style.css 中做哪些更改来更改 mat-options 的字体颜色。

<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;
    })   
   
  }

}

标签： javascriptcssangulartypescript

Answer 1

尝试这个

::ng-deep input.mat-input-element { 颜色：红色；}

或这个

::ng-deep .mat-option.mat-active { 颜色：红色；}