编辑PrimeNG组件的CSS

Question

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

我与对抗最新的零部件是从PrimeNG多选组件： https://www.primefaces.org/primeng/#/multiselect

我只是简单地试图使组件的宽度适合父组件的100％。

是否有我需要遵循的特定过程来编辑此组件的CSS类？该文档说，使用“样式”内联 - 这是否意味着：

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

因为这没有奏效。

它也表示使用“styleClass”作为属性来添加样式CSS类。你如何使用它？

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

任何想法？我究竟做错了什么？

Answer 1

用于在线PrimeNG造型，使用这样的：

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

要使用styleClass只需添加：

styleClass="example-css-class" 

这种方式，例如，你可以用很多不同风格的多选择输入域风格类，例如。 Bootstrap的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的，这将覆盖的样式后载入。