如何设置 Angular Material 自动完成功能的样式？

Question

我使用 Angular 并使用 Angular Material [https://material.angular.io/components/autocomplete/api][1] [1]：https://material.angular.io/components/autocomplete/api
我想要在我的 md-autocomplete 中添加边框半径，但它不起作用：

<md-autocomplete  class="myclass">

.myclass{
    background-color: rgb(250, 250, 250);
     border-bottom-left-radius: 50px;
     border-bottom-right-radius: 50px
}

你有解释吗？

Answer 1

要更改下拉列表样式，请使用.mat-autocomplete-panel类名：

::ng-deep .mat-autocomplete-panel{
  border-radius: 10px;    
}

这将影响所有自动完成。如果您有多个变量并且希望对它们进行不同的样式，您可以相应地设置不同的变量名称和样式。以第二个为例：

超文本标记语言

<md-autocomplete #mauto="mdAutocomplete">

CSS

::ng-deep .mat-autocomplete-panel#md-autocomplete-0{  //for the first one

::ng-deep .mat-autocomplete-panel#md-autocomplete-1{ //for the second one

演示版