如何应用样式属性角度自动完成

Question

在我的角度应用程序中，我具有自动完成功能

template.html

<mat-form-field >
    <input matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl">
       <mat-autocomplete #auto="matAutocomplete" [displayWith] = "displayFn">
         <mat-option *ngFor="let option of (filteredOptions | async);index as i" [value] ="option">
           {{option.name}}
         </mat-option>
       </mat-autocomplete>
   </mat-form-field>

图片中显示的下拉菜单，我希望颜色为白色，文本颜色必须为黑色，该怎么办？

我尝试将mat-autocomplete attr的样式应用于bg-color = white和color = black。但这还没有解决。请帮助我：）

我还想显示完整的单词，例如：应该显示1069842（CADMinexxxxx），而不是1069842（CAD ...

Answer 1

覆盖样式

::ng-deep mat-option {
  background-color: white;
}

Answer 2

将此内容写入style.css

.mat-option{
  background-color: red;
}

希望它会为您服务

Answer 3

  

在[MatAutocomplete] [1]的文档中，有一个属性正是您所需要的：

@Input() panelWidth: string | number

 Specify the width of the autocomplete panel. Can be any CSS sizing value, otherwise it will match the width of its host.

By using this property you are not in the risk of meddling with anything else inherited from cdk-overlay-pane.

For further customization you might find this property useful as well: 

@Input('class') classList: string

Takes classes set on the host mat-autocomplete element and applies them to the panel inside the overlay container to allow for easy styling.