如何为NzSelect组件设置超出nzSize预设范围的自定义高度

NzSelect 官方内置的nzSize仅支持small/default/large三个可选值，对应输入框高度分别为24px、32px、40px，没有提供更大尺寸的原生配置项。所有超出预设范围的高度调整，都需要通过样式覆盖实现。

推荐实现步骤（无样式泄漏、优先级可控） #

1. 给目标NzSelect组件绑定专属自定义类，例如：

   <nz-select
     class="custom-extra-tall-select"
     nzSize="large"
     [nzOptions]="options"
   ></nz-select>
   

2. 在组件的样式文件中，通过样式穿透定位到实际控制输入框高度的内部元素（.ant-select-selector）做高度覆盖。Angular默认的模拟视图封装会遮挡组件内部样式，需要用::ng-deep打通样式边界：

   ::ng-deep .custom-extra-tall-select {
     // 替换为你需要的自定义高度，例如60px
     .ant-select-selector {
       height: 60px !important;
       display: flex;
       align-items: center;
     }
     // 单选模式下同步调整选中项的行高，避免文字偏移
     &.ant-select-single .ant-select-selection-item {
       line-height: 60px;
     }
     // 多选模式下调整内边距，避免内部tag上下溢出
     &.ant-select-multiple .ant-select-selector {
       padding-top: 0;
       padding-bottom: 0;
     }
   }
   

说明：添加!important是为了覆盖NG-ZORRO内置的尺寸优先级样式，如果不想用全局权重的标记，也可以通过提升选择器层级的方式实现同效果，例如将选择器写为.app-root .custom-extra-tall-select .ant-select-selector，依靠更高的层级权重压过内置样式。

可复用的全局实现方案 #

如果项目中多处需要使用同一种超大尺寸的Select组件，可以直接在全局样式文件（styles.scss）中定义通用类，不需要额外写组件内的穿透样式：

// 全局定义56px高度的Select通用类
.ant-select-selector.height-56-select {
  height: 56px !important;
  display: flex;
  align-items: center;
}
.height-56-select.ant-select-single .ant-select-selection-item {
  line-height: 56px;
}

使用时只需给NzSelect加上class="height-56-select"即可生效。

常见踩坑提醒 #

• 不要直接给外层的<nz-select>标签设置height属性：组件实际的可视输入区域是内部的.ant-select-selector元素控制的，外层设置高度不会改变输入框实际尺寸，还会导致下拉触发区域错位。
• 调整完高度必须同步匹配内部文字、选中项的line-height，否则会出现文字与边框不对齐、上下偏移的问题。
• 不需要特意移除已有的nzSize="large"配置：自定义样式会直接覆盖内置的高度值，保留原有配置不会产生冲突。

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