为 PrimeNG 组件编辑 CSS

Posted 2023-03-05

【中文标题】为 PrimeNG 组件编辑 CSS

【英文标题】：Editing CSS for PrimeNG Components

【发布时间】：2018-01-11 23:34:08

【问题描述】：

我目前正在使用 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”时，它仍然不起作用。

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

【参考方案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之后加载，会覆盖样式。

【讨论】：

完美运行。这应该是 PrimeNG 文档的一部分！谢谢！

很高兴我能帮上忙 :)

注意styleClass只能给组件添加样式，不能覆盖ui样式。见***.com/questions/45499851/…