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

<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

CodePudding user response：

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;
}