mat-autocomplete classList Input 如何工作？

Question

根据 MatAutocomplete documentation，有一个 classList 输入来设置面板的样式。

@Input('class') classList: string | 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.

当我执行 <mat-autocomplete #auto="matAutocomplete" classList="test-class"> 时，我希望我会看到 test-class 添加到 mat-autocomplete-panel？但这是行不通的。

有人可以解释一下这个输入是如何使用的吗？

Stackblitz

Answer 1

我明白了。文档说需要类 "在主机上设置 mat-autocomplete".

那是我错过的部分。你还需要设置class="test-class"

<mat-autocomplete #auto="matAutocomplete" class = "test-class" classlist="test-class">

我还意识到 css 必须在您的应用程序的基础 styles.css file 中而不是在您的组件 css 文件中才能正常工作。这可能是因为您的面板将位于组件之外的覆盖层内

Working stackblitz

编辑

或者正如 Ankit Singh 在他的回答中指出的那样，如果您仍想在组件 css 文件中执行此操作，则可以使用 ::ng-deep...

::ng-deep .test-class {
  background-color: blue;
}

Answer 2

根据 Pieter Buys Anwser 我要补充

你可以 ng-deep

在 .css 文件中，如果你想 css 被封装

Working stackblitz

Answer 3

如果你想自定义（没有classlist但仍然有封装），在你的style.css

.mat-autocomplete-panel:hover {
  .mat-option:hover {
    background: blue;
    color: white;
  }
}

mat-autocomplete classList Input 如何工作？

How does mat-autocomplete classList Input work?

angular-material

angular

mat-autocomplete

编辑