编辑PrimeNG组件的CSS

Question

我目前正在使用Angular 4，Angular Materials和PrimeNG组件开发用户界面。

我正在与之争斗的最新组件是PrimeNG的MultiSelect组件：  https://www.primefaces.org/primeng/#/multiselect

我只是想让组件的宽度适合父组件的100％。

是否需要遵循特定的流程来编辑此组件的CSS类？文档说使用“Style”进行内联 - 这是否意味着：

<p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100%;"></p-multiSelect>

因为这不起作用。

它还说使用“styleClass”作为属性来添加样式CSS类。你怎么用这个？

最后，它们提供了PrimeNG组件在网站上使用的CSS类列表（例如ui-multiselect）。当我尝试通过在Angular组件CSS中声明它来修改'ui-multiselect'时，它仍然不起作用。

有什么想法吗？我做错了什么？

Answer 1

对于内联PrimeNG样式，请使用以下内容：

[style]="{'width': '100%'}"

要使用styleClass，只需添加：

styleClass="example-css-class"

这样，例如，您可以设置具有许多不同样式类的多选输入字段的样式，例如。 Bootstrap＆＃39; s form-control。

使用PrimeNG ui进行操作时，请务必将它们放入组件.css中。如果您使用全局styles.css，则必须覆盖.angular-cli.json中的PrimeNG文件。您可以通过编辑styles数组来完成此操作：

"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/primeng/resources/themes/omega/theme.css",
"styles.css"

当styles.css放在primeng资源之后，它会在primeng之后加载，这将覆盖样式。