更改Primeng Paginator的模板

Question

我在项目中使用primeng组件。但我想对paginator组件的模板进行一些更改。我制作了一个新组件，扩展了paginator的{​​{1}}组件，并在primeng中添加了新模板。 但是其他一些@Component组件则使用primeng组件进行分页，例如paginator。这些组件可以使用这种新的扩展版本组件吗？

Answer 1

要更改所有primeng组件样式，可以更改导入到项目中的primeng css主题。

您可以通过更改angular.json中导入的css来更改primeng模板。 在样式中查找angular.json文件，更改primeng主题css（应如下所示）：

"styles": [
     ...
     "node_modules/primeng/resources/themes/nova-light/theme.css",
     ...
]

将-node_modules / primeng / resources / themes / nova-light /theme.css-或使用的任何主题更改为其他主题文件夹名称。

要根据需要更改特定组件时，可以添加CSS代码以覆盖Primeng CSS的默认样式。

Primeng为您提供了要覆盖的类，以便根据需要设置其组件的样式。 例如，查看primeng - dropdown docs，您可以找到一个名为“样式”的部分，其中显示了要覆盖的所有相关CSS类，以便根据需要对组件进行样式设置。

我做了一个sample project，您可以在其中看到我更改了下拉菜单的图标。