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

Question

我使用以下代码：

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

我希望它看起来像这样：

但还是这样：

而且从选择

的地方很难看

Answer 1

我只是在 styles.scss

中添加 panelClass 来选择标记和样式这个类

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;
}

Answer 2

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

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

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

同时检查您的全局样式 CSS 文件。也许那个 CSS 可以覆盖这个 CSS。

Answer 3

这可能不是最佳做法，但您可以尝试在 style.csss 中添加它们!important

.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