如何设置 PrimeNg 下拉图标的样式答案

【问题标题】：How to style the PrimeNg dropdown icon如何设置 PrimeNg 下拉图标的样式
【发布时间】：2019-03-25 23:36:10
【问题描述】：

我正在尝试为 PrimeNg 的下拉图标设置样式。

这是它目前的外观以及我试图让它看起来的样子。

我猜我必须设置样式

ui-dropdown-trigger

但我不确定将其设置为什么。

我尝试了背景色，但没有成功。

我尝试的另一件事是将其设置为如下属性：

<p-dropdown ... [styleClass]="{background-color:black}" ...></p-dropdown>

有什么想法吗？

编辑：

这就是我获得所需输出的方式：

【问题讨论】：

标签： css primeng

【解决方案1】：

要更改 dropdownicon 属性本身，您需要做两件事：

1）您需要在component.ts 中创建一个var，您将在其中放置所需图标的字符串。但是您必须在字符串的开头添加“fa fa-fw”。例如，如果你想放一个'fa-star'，完整的字符串将是'fa fa-fw fa-star'

export class AppComponent {
  star = 'fa fa-fw fa-star';
  constructor(){}
}

2）在component.html中，你必须添加[dropdownIcon]=var

<p-dropdown[dropdownIcon]="star" placeholder="Search (Jobs)"></p-dropdown>

【讨论】：

【解决方案2】：

您可以使用以下方法将其设置为属性：

<p-dropdown ... [style]="{'background-color': 'black'}" ...></p-dropdown>

或者您可以设置 ui-dropdown-trigger 的样式，但是您必须在全局样式表中进行设置，而不是在组件的样式表中。

要在组件的 css 文件中设置 ui-dropdown-trigger 样式，您必须使用

:host >>> .ui-dropdown-trigger {...}

但是，这已被弃用。

【讨论】：

【解决方案3】：

我使用来自 primeng 的包含引导主题。所以我必须适应：

body .ui-dropdown .ui-dropdown-trigger {
    background-color: blue;
}

在 CSS 中为主题中的触发器着色。

【讨论】：