<mat-paginator
        #paginator
        class="table-paginator"
        (page)="handlePageEvent($event)"
        [length]="paginatorLength"
        [pageSize]="paginatorPageSize"
        [showFirstLastButtons]="paginatorShowFirstLastButtons"
        [pageSizeOptions]="paginatorShowPageSizeOptions ? paginatorPageSizeOptions : []"
        [hidePageSize]="paginatorHidePageSize"
        [pageIndex]="paginatorPageIndex">
    </mat-paginator>

::ng-deep .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
  background: #02a10e !important;
}
::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple {
  background-color: #04c431 !important;
}

I try this code, but it does not changed the background color of the dropdown, how could I change it?

    <mat-paginator
        #paginator
        class="table-paginator"
        (page)="handlePageEvent($event)"
        [length]="paginatorLength"
        [pageSize]="paginatorPageSize"
        [showFirstLastButtons]="paginatorShowFirstLastButtons"
        [pageSizeOptions]="paginatorShowPageSizeOptions ? paginatorPageSizeOptions : []"
        [hidePageSize]="paginatorHidePageSize"
        [pageIndex]="paginatorPageIndex">
    </mat-paginator>

::ng-deep .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
  background: #02a10e !important;
}
::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple {
  background-color: #04c431 !important;
}

I try this code, but it does not changed the background color of the dropdown, how could I change it?

• html
• css
• angular
• sass
• angular-material

1 Answer 1

You can use the below CSS variables to customize the color, since there is no inbuilt customization available in pagination - styling page.

The problem with this approach is that the CSS might break when you upgrade to higher versions of angular material, but that is the same for all non standard ways of customizing material components.

.custom-dropdown-color {
  --mat-sys-secondary-container: #02a10e !important;
  --mat-option-selected-state-layer-color: #04c431 !important;
}

Then we use the panelClass property of MatPaginatorSelectConfig which has the input selectConfig.

Adding the class is important since, we can customize the dropdown specific to a particular component.

<mat-paginator
[length]="100"
[pageSize]="10"
[pageSizeOptions]="[5, 10, 25, 100]"
aria-label="Select page"
[selectConfig]="{panelClass: 'custom-dropdown-color'}"
>
</mat-paginator>

Stackblitz Demo