mat-autocomplete classList Input 如何工作？

问题描述

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

@Input('class') classList: string |字符串[]

采用在主机 mat-autocomplete 元素上设置的类并应用 它们到覆盖容器内的面板，以便于 造型。

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

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

Stackblitz

解决方法

我想通了。文档说它需要类“在主机垫自动完成上设置”。

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

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

我还意识到 css 必须在您应用的基础 styles.css file 中，而不是在您的组件 css 文件中才能工作。这可能是因为您的面板将位于组件外部的叠加层内

Working stackblitz

,

根据 Pieter Buys Anwser，我想补充

你可以深入

在 .css 文件中，如果你希望你的 css 被封装

Working stackblitz