I've been using newest Angular Material in Angular 20.
Trying to control stuff using mat.*-overrides but I can't find the option to change height of each mat-option inside of the form-field inside the mat-paginator.
I was able to change the size of the form-field itself and color and background of the each mat-option but I cannot figure out how to change the height.
Disclaimer:
"Angular strongly discourages, and does not directly support, overriding component CSS outside the theming APIs described above. Component DOM structure and CSS classes are considered private implementation details that may change at any time." It means that if you update the version of material your styles will break. But so it's important to take that into account.
So it is important to note that the styles could break after material version update. In general angular material documentation discourages this approach.
When the style in hardcoded in the CSS, there is no other way to customize it.
.mat-mdc-option {
...
min-height: 48px; /* hard coded! */
...
}
We can try the below approach, where we define a custom class, for the dropdown of the mat-paginator using the selectConfig input.
<mat-paginator
[length]="100"
[pageSize]="10"
[pageSizeOptions]="[5, 10, 25, 100]"
aria-label="Select page"
[selectConfig]="{panelClass: 'custom-options-size'}"
>
</mat-paginator>
Then we define the CSS which adjusts the height of the options.
.custom-options-size .mat-mdc-option {
min-height: 20px;
}
