如何更改角度材质的选择样式？

Question

我使用以下代码：

::ng-deep{
 .mat-select-panel{
   border-radius: 10px;
   border: 1px solid gray;
   position:absolute;
   top: 50px;
 }
}

我希望它看起来像 ：

but still, it's like this:

然后在选择的地方从打开是很丑的

Answer 1

请确认，您使用CSS还是SCSS。如果您使用CSS，它将无法正常工作。更改为SCSS。

我已经在mat-select组件中使用panelClass属性添加了该类。通过使用该类，您可以更新CSS

如果您使用的是SCSS，请在此处进行演示-https://stackblitz.com/edit/angular-jhxdfy-piucvw

还要检查您的全局样式CSS文件。也许CSS可以覆盖此CSS。

Answer 2

这可能不是最佳做法，但是您可以尝试使用!important

将它们添加到style.csss中

.html

<mat-select id='myCustomDropdown' placeholder="Favorite food">
    <div class="custom-style">
        <mat-option *ngFor="let food of foods" [value]="food.value">
            {{ food.viewValue }}
        </mat-option>
    </div>
</mat-select>

style.css

.custom-style .mat-option{
    color:red !important
 }

Working Demo

Answer 3

我只需添加 panelClass 即可选择标签并在 styles.scss

中设置此类的样式

Html:

<mat-form-field>
  <mat-select disableOptionCentering panelClass="dropDown-seasons-panel">
      <mat-option *ngFor="let season of seasons" [value]="season.value">
         {{season.viewValue}}
      </mat-option>
  </mat-select>
 </mat-form-field>

styles.scss:

.dropDown-seasons-panel {
  border-radius: 10px !important;
  border: 1px solid gray !important;
  position: absolute !important;
  top: 50px !important;
}