如何设置Angular Material自动完成的样式？答案

【问题标题】：How to style Angular Material autocomplete?如何设置Angular Material自动完成的样式？
【发布时间】：2021-08-03 00:22:13
【问题描述】：

我使用 Angular 并使用 Angular 材质 [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
}

你有解释吗？

【问题讨论】：

你把样式放在哪里，在哪个文件中？你读过这个material.angular.io/guide/customizing-component-styles
不，好的，我考虑谢谢

标签： css angular angular-material2

【解决方案1】：

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

::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

【讨论】：

不，我想要在我输入时出现的 div 周围
是的，你真是个天才，如果我有两个自动完成功能，我会添加 id 属性？
如果你想要不同的样式，最好添加内联样式并放 !important
但是如果使用内联样式它不起作用:(
是的，它适用于背景颜色并在 md 选项上设置。我对演示进行了更新，请看一下

【解决方案2】：

您想在 md-autocomplete 周围放置边框还是在 md-form-field 周围放置边框？

我相信你想要它在表单域周围。有关 HTML 的示例，请参阅 https://material.angular.io/components/autocomplete/examples。

如果您打开以下 plunkr，它会使用您的 css 来设置 md-form-field 的样式：

.example-full-width {
     background-color: rgb(255, 0, 0);
     border-bottom-left-radius: 50px;
     border-bottom-right-radius: 50px
}

https://plnkr.co/edit/DWzjsRNGXZsPRfjWRrI6?p=preview

我用红色代替了 15% 的灰色，所以更明显。

【讨论】：

没有在我的但它不起作用谢谢