在 Angular Material 中设置 mat-select 的样式

自定义 mat-select 的外观时，您可能会在设置其面板组件的样式时遇到挑战。尽管遵循使用 panelClass 属性指定自定义样式的推荐方法，但样式无法应用，让您感到困惑。

为什么样式不起作用

Angular Material 使用 mat-select -content 作为选择列表内容的类名称。要设置此组件的样式，可以使用多种方法：

1。使用 ::ng-deep

使用 ::ng-deep 阴影穿透后代组合器强制样式通过子组件。

::ng-deep .mat-select-content {
  width: 2000px;
  background-color: red;
  font-size: 10px;
}

2.使用 ViewEncapsulation

将组件的视图封装配置为 None，允许样式逃脱组件的隔离。

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

3.在 style.css 中设置类样式

使用 style.css 文件定义自定义样式，并使用 !important 强制执行它们以覆盖任何现有样式。

.mat-select-content {
  width: 2000px !important;
  background-color: red !important;
  font-size: 10px !important;
}

4.使用内联样式

将内联样式直接应用于 mat-option 元素，覆盖任何继承的样式。