изменение шаблона Primeng Paginator

Question

Я использую primeng компоненты в своих проектах.но я хочу внести некоторые изменения в шаблон компонента paginator.Я создал новый компонент, который расширяет paginator компонент primeng, и добавляю новый шаблон в @Component.но некоторые другие primeng компоненты используют компонент paginator для своей нумерации страниц, например dataview.Есть ли способ, что эти компоненты могут использовать этот новый компонент расширенной версии?

Answer 1

Если вы хотите изменить стиль всех компонентов primeng , вы можете изменить тему primeng css, импортированную в ваш проект.

Вы можете изменить шаблон primeng, изменив импортированный css на угловой.JSON.Найдите файл angular.json, в стилях измените первичную тему 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 - раскрывающиеся документы , вы можете найти раздел с именем 'Styling', в котором показаны все связанные классы CSS, которые нужно переопределить, чтобы стилизовать компонент так, как вам нужно.

Я сделал пример проекта , где вы можете видеть, что я изменил значок выпадающего меню.