While using md-table-pagination in Angular Material, I am facing an issue where the color of the selected page changes from white to black every time I click on a desired row per page. Is there a way to make sure that the label stays white even after clicking? I tried adjusting the label properties, but it only changed the color of the label itself and not the one after clicking. https://i.sstatic.net/40Gno.png
</md-table-container>
<md-table-pagination md-limit="$ctrl.query.limit" md-limit-options="$ctrl.query.limitOptions" md-page="$ctrl.query.page" md-total="{{$ctrl.fullDataList.length}}" md-on-paginate="$ctrl.onPaginate" md-page-select></md-table-pagination>
</md-table-container>.md-table-pagination {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
box-sizing: border-box;
padding: 0 24px;
font-size: 12px;
color: $font-color;
border-top: 1px rgba(0, 0, 0, 0.12) solid;
}
.md-table-pagination md-select {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
min-width: 64px;
}
.md-table-pagination md-select:not([disabled]):focus .md-select-value {
color: rgba(0, 0, 0, 0.54);
}
.md-table-pagination md-select .md-select-value {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.md-table-pagination md-select .md-select-value span.md-select-icon {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
margin-right: -6px !important;
}
.md-table-pagination md-select .md-select-value span.md-select-icon:after {
top: initial;
-webkit-transform: scaleY(0.5) scaleX(1);
transform: scaleY(0.5) scaleX(1);
}
.md-table-pagination > * {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 56px;
}
.md-table-pagination > .buttons:not(:first-child),
.md-table-pagination > .limit-select:not(:first-child) {
margin-left: 32px;
}
.md-table-pagination > .buttons {
margin-right: -16px;
}
.md-table-pagination > .buttons > .md-button.md-icon-button {
margin: 0;
}
.md-table-pagination > .buttons > .label + .md-button.md-icon-button {
margin-left: 20px;
}