为 PrimeNG 组件编辑 CSS

Question

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

我正在使用的最新组件是来自 PrimeNG 的 MultiSelect 组件：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 组件 CSS 中声明它来修改“ui-multiselect”时，它仍然不起作用。

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

Answer 1

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

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

要使用styleClass只需添加：

styleClass="example-css-class"

这样，例如，您可以使用许多不同的样式类来设置多选输入字段的样式，例如。引导程序的form-control.

当您使用 PrimeNG 时ui，请务必将它们放入组件 .css 中。如果您使用 global styles.css，则必须覆盖.angular-cli.json. 您可以通过styles像这样编辑数组来做到这一点：

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

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