为 PrimeNG 组件编辑 CSS

Question

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

我正在使用的最新组件是 PrimeNG 的 MultiSelect 组件： https://www.primefaces.org/primeng/#/multiselect

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

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

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

因为这行不通。

它还说使用 "styleClass" 作为属性添加样式 CSS class。你如何使用它？

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

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

Answer 1

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

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

要使用 styleClass 只需添加：

styleClass="example-css-class"

这样，例如，您可以为多个 select 输入字段设置许多不同的样式类，例如。 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 资源之后加载，这将覆盖样式。

Editing CSS for PrimeNG Components