如何设置mat-select-panel样式？弃用::ng-deep后直接设置无效

你遇到的问题核心是：Mat-Select的下拉面板会被挂载到全局body节点下，组件内的样式默认无法渗透到外部节点，再加上你的CSS选择器写法有误，导致样式不生效。

正确解决方案 #

方案1：使用全局样式文件（推荐）

将样式写在项目根目录的全局样式文件中（比如styles.scss/styles.css），全局样式可以作用到页面所有元素，包括挂载在body下的下拉面板。

修正选择器写法（large-select类直接应用在mat-select-panel元素上，无需嵌套）：

.large-select.mat-select-panel {
  width: 500px;
  /* 若默认样式优先级更高，可添加!important强制覆盖 */
  // width: 500px !important;
}

方案2：关闭组件样式封装（不推荐，易引发样式冲突）

在组件的元数据中关闭ViewEncapsulation，这样组件内的样式会变成全局样式，无需修改选择器即可生效：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
  encapsulation: ViewEncapsulation.None // 关闭样式封装
})
export class YourComponentComponent {
  // ...
}

然后组件内的CSS可简化为：

.large-select {
  width: 500px;
}

为什么之前的写法不生效？ #

1. 样式封装限制：Angular默认的ViewEncapsulation.Default会给组件内的样式添加唯一属性选择器，仅作用于组件内部DOM，而下拉面板在组件外部，所以无法匹配。
2. 选择器错误：你写的.large-select .mat-select-panel是寻找large-select元素下的mat-select-panel，但实际large-select类是直接添加到mat-select-panel元素本身的，正确选择器应为.large-select或.large-select.mat-select-panel。

内容的提问来源于stack exchange，提问作者J.Klimov