I have an Angular Material Paginator that looks like
I want to style it and it should look like
I am having a very difficult time to style it. I was just able to move the elements in the paginator around(start and end positions), apart from this I was not able to modify anything.
Please let me know how to do the required styling?
Here is the stackblitz link https://stackblitz.com/edit/angular-tjhkpo
Use this css(for more style open F12 and override material declaretion):
::ng-deep .mat-paginator-page-size-select {
width: 27px!important;
}
::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline {
background-color: transparent;
}
::ng-deep .mat-select-value {
color: #005999;
font-weight: bold;
font-size: 15px;
}
::ng-deep .mat-select-arrow {
color: #005999;
}
::ng-deep .mat-option{
padding: 0!important;
}
::ng-deep .mat-option-text {
text-align: right;
}
For captions modifying you should provide MatPaginatorIntl. Example
If you use separate style for components and you want style child component you need to use in your css
style ::ng-deep
before you style child component selector, for example:
::ng-deep .mat-select-value {
border: 1px solid red!important;
}
When using ::ng-deep
try to add more restrictive selectors so that you reduce the risk of side-effects eg
::ng-deep {
.mat-select-panel[aria-label="Items per page:"] {
.mat-option-text {
font-size: 1.4rem;
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.