NG-Zorro select组件设置下拉选项宽度仅对单个组件生效如何实现

• 方案1：配合NG-Zorro Select自带的nzDropdownClassName属性 + 限定作用域的::ng-deep（无全局污染）
  1. 先给你需要修改的单个nz-select标签添加自定义下拉框类名：

  <nz-select
    nzDropdownClassName="custom-single-select-dropdown"
    <!-- 其他原有属性 -->
  >
    <!-- 选项内容 -->
  </nz-select>
  

  2. 在当前组件的样式文件中写如下样式，:host会限定样式仅作用于当前组件内部的元素，加上自定义类名后只会命中你指定的这一个下拉框，不会影响全局：

  :host ::ng-deep .custom-single-select-dropdown {
    width: 112px !important;
  }
  

• 方案2：完全不使用::ng-deep的实现
  直接把自定义类的样式写在项目全局样式文件（通常是src/styles.scss或src/styles.css）中即可，因为你用的是唯一自定义类名，只会匹配你加了nzDropdownClassName的那一个select下拉框，不会污染其他组件：

  .custom-single-select-dropdown {
    width: 112px !important;
  }
  

补充说明：如果你的需求是下拉框宽度和select输入框的宽度自动保持一致，不需要手动指定固定宽度，直接给nz-select加[nzDropdownMatchWidth]="true"属性即可。

内容的提问来源于stack exchange，提问作者Alexis