将自定义字体大小和触发图标大小添加到 PrimeNG 下拉菜单答案

【问题标题】：Add Custom Font Size and Trigger Icon Size to PrimeNG Dropdown将自定义字体大小和触发图标大小添加到 PrimeNG 下拉菜单
【发布时间】：2021-03-25 07:09:08
【问题描述】：

我一直在使用 PrimeNG 作为我一直在开发的 Angular TypeScript 应用程序的 UI 库，并且在自定义我放在一起的 PrimeNG 下拉菜单的字体大小样式和下拉触发器图标样式时遇到了麻烦。 PrimeNG 的样式文档似乎对如何自定义它相当模糊。

无论我如何调整它，下拉菜单中的字体大小都不会改变。我不确定是否应该使用 html 中的内联样式、TypeScript 中的属性，或者覆盖 PrimeNG CSS 样式来完成此操作。这也适用于下拉触发器图标。

这是我的 HTML、TypeScript 和 CSS。

<p-dropdown [options]="heights" [style]="{'font-size':'12px'}" [(ngModel)]="height" (ngModelChange)="adjustHeight()">
</p-dropdown>

heights: SelectItem[] = [
    {label: 'Table Size: Small', value: 'Small'},
    {label: 'Table Size: Large', value: 'Large'}
];

.p-dropdown {
    font-size: 12px !important;
}

.p-dropdown-trigger {
    font-size 12px !important
}

更新：使用下面的建议和对 PrimeNG 中提到的样式类的简单调整，我能够更改 p-dropdown 中文本的字体大小：

:host ::ng-deep .p-dropdown-label {
    font-size: 12px !important;
}

【问题讨论】：

【解决方案1】：

试试这个：-

:host ::ng-deep .p-dropdown {
    font-size: 12px !important;
}

:host ::ng-deep .p-dropdown-trigger {
    font-size 12px !important
}

【讨论】：

我能够使用 :host ::ng-deep .p-dropdown-label { .... } 更改下拉文本的字体大小，但由于某种原因下拉触发图标大小即使使用这种方法也不会改变。
@NicFalcione 你能提供一个stackblitz吗？
stackblitz.com/edit/angular6-primeng-mrtijv?file=src/app/…
你应该用.p-dropdown-trigger-icon替换.p-dropdown-trigger。