如何通过listStyleClass为PrimeNG ListBox设置max-height

我通过listStyle内联样式成功给PrimeNG ListBox设置了max-height：

<p-listbox id="myListbox" class="my-list" [options]="listItems()"
  [listStyle]="{ 'max-height': '300px' }">
</p-listbox>

但改用listStyleClass时，组件CSS中的样式却不生效：

<p-listbox id="myListbox" class="my-list" [options]="listItems()"
  listStyleClass="customListStyleClass">
</p-listbox>

组件CSS代码：

.customListStyleClass {
   max-height : 300px;
}

请问如何不使用内联样式实现该效果？

1. 补充溢出滚动属性并确保样式生效 #

仅设置max-height不会让超出容器的内容自动滚动，需要配合overflow-y: auto才能直观看到高度限制效果。修改组件CSS：

.customListStyleClass {
  max-height: 300px;
  overflow-y: auto;
}

2. 解决Angular样式封装限制 #

如果上述代码仍无效果，是因为Angular默认的ViewEncapsulation会限制组件内样式的作用域，无法渗透到PrimeNG的内部DOM元素。可通过以下两种方式处理：

方式一：使用::ng-deep穿透样式

::ng-deep .customListStyleClass {
  max-height: 300px;
  overflow-y: auto;
}

方式二：将样式放入全局样式文件（推荐）

把自定义样式添加到项目根目录的styles.css（或styles.scss）中，全局样式不受组件封装限制：

.customListStyleClass {
  max-height: 300px;
  overflow-y: auto;
}

原理说明 #

PrimeNG的listStyleClass是将类名添加到ListBox内部的列表容器元素上，但Angular组件的样式封装规则会阻止组件内样式作用于第三方组件的内部DOM。补充overflow-y: auto后，当内容高度超过限制时会显示滚动条，才能体现出max-height的作用。

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