how i can styling primeng p-table inner paginator? - css

Question

<p-table [value]="rows" [styleClass]="'inner_table'" [paginator]="true" [rowsPerPageOptions]="[5,10,25]" [rows]="5">...</p-table>
i tryed many option:
.inner_table .ui-paginator {
background-color: red !important;
}
.ui-paginator-pages .ui-state-active {
background-color:red;
}
etc. but they didn't work. paginator stay just white.
my styles don't apply

Answer 1

You should add the styles in the file "styles.css", not in the app-component.css
BTW: the version 15.1.0, has change the name of the classes, e.g.
This .css
.inner_table .p-paginator .p-paginator-pages .p-paginator-page.p-highlight
{
background:red;
color:white;
}
.inner_table .p-paginator
{
background:silver;
}
.inner_table .p-paginator .p-paginator-current,.inner_table .p-paginator .p-paginator-pages .p-paginator-page,
.inner_table .p-paginator .p-paginator-first, .inner_table .p-paginator .p-paginator-prev, .inner_table .p-paginator .p-paginator-next, .inner_table .p-paginator .p-paginator-last
{
color:white;
}
Give this stackblitz
Update for prime-ng 8 you can try
.inner_table .ui-paginator
{
background:red;
}
.inner_table .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active
{
background:red;
}