css - 如何设置 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;    
}

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

HTML

<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

DEMO